TinyMce4 dom添加可拖動元素（jquery）

Question

你好，我正在使用TineMce4。

我構建了一個新插件，它將新元素（p）添加到我的文本編輯器中。

現在我需要在元素中添加 - >可拖動/拖動和grop with->（jquery）。

我試圖添加可拖動的類到這個元素

這是行不通的。

我認爲我需要使用jQuery MyElemet.draggable（）;在這個元素上，但我不知道如何。

做任何人知道如何使元素，我添加到文本editior draggable？

我的代碼：

tinymce.create('tinymce.plugins.AddContent', { 

    init : function(ed, url) { 
     ed.addCommand('mceAddContent', function() { 
tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', { 'class': 'draggableTemplate' }, 'Some Text ...'); 
// tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', { 'class': 'draggableTemplate' }, 'Some Text ...').draggable();//not working 

     }); 

     // Register example button 
     ed.addButton('addcontent', { 
      title : 'Add content at the end', 
      cmd : 'mceAddContent', 
      image: url + '/img/addcontent.png', 
      onclick: function() { 

       //var editor = tinymce.activeEditor; 
       //var ed_body = $(editor.getBody()); 
       //ed_body.find('p').draggable();//not working 
      } 
     }); 
    } 
    }); 

    // Register plugin with a short name 
    tinymce.PluginManager.add('addcontent', tinymce.plugins.AddContent); 

Answer 1

我發現這個解決方案，你需要使用$（editor.getBody（））按類別查找，然後使其可拖動。

這裏是addCommand的更新代碼：

ed.addCommand('mceAddContent', function() { 
tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', { 'class': 'draggableTemplate' }, 'Some Text ...'); 
      var editor = tinymce.activeEditor; 
      var ed_body = $(editor.getBody()); 
      ed_body.find('.draggableTemplate').draggable(); 

     }), 

全碼：

tinymce.create('tinymce.plugins.AddContent', { 

    init: function (ed, url) { 
     ed.addCommand('mceAddContent', function() { 
      var el = tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', { 'class': 'draggableTemplate' }, 'Some Text ...'); 
      var editor = tinymce.activeEditor; 
      var ed_body = $(editor.getBody()); 
      ed_body.find('.draggableTemplate').draggable(); 

     }), 

     // Register example button 
     ed.addButton('addcontent', { 
      title: 'Add content at the end', 
      cmd: 'mceAddContent', 
      image: url + '/img/addcontent.png', 
      onclick: function() { 

      } 

     }); 

    } 

}); 

// Register plugin with a short name 
tinymce.PluginManager.add('addcontent', tinymce.plugins.AddContent);