Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to use jQuery sortable within the TinyMCE Visual Editor in WordPress. I have had some success in that I can get a UL list to sort, but only if I drag the mouse OUTSIDE of the actual editor.

So to say: It seems that the mouse pointer to list element movement ratio is wrong. If I move (for e.g.) 10px with the pointer, the list element only moves 1px.

You can see what I mean with this short 1 minute screencast video: enter image description here

click image to see screencast

Here is the code I am using to run this [note: I have edited the code to a working version]:

(function() {
   tinymce.create('tinymce.plugins.tinyMceSort', {
      init : function(ed, url) {
         ed.addButton('tinymcesort', {
            title : 'TinyMCE Sort',
            image : url+'/tiny_sort.png',
            onclick : function() {
                 ed.execCommand('mceInsertContent', false, '\
                    <ul id="list">\
                    <li>One</li>\
                    <li>Two</li>\
                    <li>Three</li>\
                    <li>Four</li>\
                    <li>Five</li>\
                    </ul>\
                ');
              }
          });

        ed.onVisualAid.add(function(ed, e, s) {
            jQuery('#content_ifr').contents().find('#list').sortable({ containment : 'parent', tolerance : 'pointer', cursor : 'move'}).css({'width' : '200px', 'padding' : '10px', 'list-style' : 'none', 'background-color' : '#333'});
            jQuery('#content_ifr').contents().find('li').css({'background-color' : 'grey', 'margin': '10px', 'padding': '10px'});
            jQuery('.wrap').sortable();
      });

     },
    createControl : function(n, cm) {
      return null;
    },
    getInfo : function() {
      return {
        longname : "Buildpress Columns",
        author : 'Moshe Morris',
        authorurl : 'http://getbuildpress.com/',
        infourl : 'http://getbuildpress.com/',
        version : "1.0"
      };
    },
  });
   tinymce.PluginManager.add('tinymcesort', tinymce.plugins.tinyMceSort);

})();

What I would like to know is what do I have do in order to sort the list WITHOUT having to move the mouse outside of the TinyMCE Editor area.

Edit: Here is the other code that relates to the plugin:
TINY-SORT.PHP FILE

<?php
/*
Plugin Name: TinyMCE Sort
*/

define( 'TINYMCE_SORT_URI', trailingslashit( plugin_dir_url( __FILE__ ) ) );
add_action('init', 'tinymce_sort_init');
function tinymce_sort_init() {
  if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
  return;

  add_filter("mce_external_plugins", "tinymce_sort_register_plugin"); 
  add_filter('mce_buttons', 'tinymce_sort_add_tbutton');
}

function tinymce_sort_register_plugin($plugin_array) {
    $plugin_array['tinymcesort'] = TINYMCE_SORT_URI . '/tinymce/editor_plugin.js';
    return $plugin_array;
}

function tinymce_sort_add_tbutton($buttons) {
  array_push( $buttons, "|", "tinymcesort" );
  return $buttons;
}

add_filter( 'tiny_mce_version', 'my_refresh_mce');
function my_refresh_mce($ver) {
  $ver += 3;
  return $ver;
}

add_action( 'admin_enqueue_scripts', 'add_tinymce_sort_jquery' );
function add_tinymce_sort_jquery() {
  wp_register_script( 'tinymce_sort_jquery_ui', TINYMCE_SORT_URI . 'js/jquery_ui.js', array('jquery'), false, '1.10.2');
  wp_enqueue_script( 'tinymce_sort_jquery_ui');
}
?>

Final note: You will notice that I am NOT using the jquery-ui version that is included with Wordpress - I couldn't get it to work. I simply copied and pasted from Google APIs. Here is the link for your convenience: ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js.

share|improve this question
    
Very well formatted question. I updated it a bit. Still not sure if it wouldn't be better to move it to SO. –  kaiser Apr 26 '13 at 11:23
    
Aside from that, the code like it is, can't be taken and moved to a test plugin as it doesn't work. Please fix the code, so we can test and use it - there're abandoned/orphaned brackets, etc. –  kaiser Apr 26 '13 at 11:30
    
I have uploadded a zip file containing the code for the plugin (I've tested it on my computer and it works). You can download it here: screencast.com/t/BSeF4KIgWz [Look for the line that says: "Unable to embed this content type. Download this media." and click on Download this media.] Thanks for your help –  user15927 Apr 28 '13 at 9:20
    
Seriously? Please add your code in here. External resources like this one aren't valid for a question. If you can't do that, then I recommend closing it as too localized - it's already close to off topic as it's javascript only. –  kaiser Apr 28 '13 at 13:47
    
Okay - sorry about that. I have edited the entry - please let me know if it works now. Thanks again, Moshe –  user15927 Apr 28 '13 at 17:32
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.