Jquery ui 在Wordpress的TinyMCE可视化编辑器中对UL列表进行排序

我试图在Wordpress的TinyMCE可视化编辑器中使用jQuery sortable。我已经取得了一些成功，我可以得到一个UL列表进行排序，但前提是我将鼠标拖动到实际编辑器之外。你可以通过这段1分钟的短片了解我的意思：

以下是我用来运行此操作的代码：

    (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) {
          console.debug('onVisualAid event: ' + ed.id + ", State: " + s);
           // jQuery('#content_ifr').contents().find('#move').sortable({ containment: '#move' });
            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();
      });


    ed.plugins.wordpress._showButtons(target, 'tinyMceSort');

          }
      });
    },

    createControl : function(n, cm) {
      return null;
    },

    getInfo : function() {
      return {
        longname : "TinyMCE Sort",
        author : '',
        authorurl : '',
        infourl : '',
        version : ""
      };
    },
  });
   tinymce.PluginManager.add('tinyMceSort', tinymce.plugins.tinyMceSort);
})();

（函数（）{
create（'tinymce.plugins.tinyMceSort'{
init：函数（ed，url）{
ed.addButton（'tinyMceSort'{
标题：“TinyMCE排序”，
图片：url+'/tiny_sort.png'，
onclick:function（）{
ed.execCommand（'mceInsertContent'，false，'\
\
一个\
两个\
三个\
四个\
五个\
\
');
}
});
添加（函数（ed，e，s）{
调试（'onVisualAid事件：'+ed.id+”，状态：“+s”）；
//jQuery（'#content_ifr'）.contents（）.find（'#move'）.sortable（{containment:'#move'}）；
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（）；
});
wordpress._showButtons（目标为“tinyMceSort”）；
}
});
},
createControl:函数（n，cm）{
返回null；
},
getInfo:function（）{
返回{
longname:“TinyMCE排序”，
作者：''，
authorurl:“”，
infourl:“”，
版本：“”
};
},
});
tinymce.PluginManager.add（'tinyMceSort'，tinymce.plugins.tinyMceSort'）；
})();

---

我想知道的是，在不必将鼠标移到TinyMCE编辑器区域之外的情况下，如何对列表进行排序。

TinyMCE使用iframe。我猜tinymce iframe中没有必要的代码。 为了使用iframe的tinymce加载javascript文件，您也可以使用onInit of tinymce

// Load a script from a specific URL using the global script loader
tinymce.ScriptLoader.load('somescript.js');

---

谢谢你的回答。我不确定我是否做错了什么，但这似乎没有帮助。我做了进一步的搜索，找到了这个答案（），这似乎也有帮助，但遗憾的是，我无法在jsfiddler之外找到这个答案。还有其他想法或建议吗？我已经取得了一些进展-我尝试了一个不同的排序插件（HTML5排序表--）。它起作用了！但是，它将draggable='true'和style='display:list item；”直接添加到我不希望拖动的li标记中，因为我不希望这些标记发布到前端（毕竟，这是在wordpress可视化编辑器中）。所以，我在寻找其他的选择——有什么想法吗？或者，有没有办法修复jquery ui？请注意jquery ui-如果可能的话，我不会碰它-如果我可以问的话，为什么会这样（我知道这有点离题，但不是100%，因为我必须选择解决方案）。你能给我指一篇文章或其他东西让我知道它的缺点吗？不，我们的问题是让jQuery UI与其他js库一起工作（我想我们的用例有点特定，jQuery在大多数情况下应该可以正常工作）