1

我正在尝试在 Wordpress 的 TinyMCE 可视化编辑器中使用可排序的 jQuery。我已经取得了一些成功，因为我可以获得一个 UL 列表进行排序，但前提是我将鼠标拖到实际编辑器的外部。您可以通过这个 1 分钟短的截屏视频了解我的意思：http: //screencast.com/t/1FNMvLw3Y

这是我用来运行它的代码：

    (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);
})();

我想知道的是我要做什么才能对列表进行排序而不必将鼠标移到 TinyMCE 编辑器区域之外。

4

1 回答 1

0

Tinymce 使用 iframe。我猜在 tinymce iframe 中没有必要的代码。为了使用 iframe 的 tinymce脚本加载器加载javascript 文件，您也可以使用 tinymce 的 onInit 这个

// Load a script from a specific URL using the global script loader
tinymce.ScriptLoader.load('somescript.js');
于 2013-04-29T08:20:48.900 回答