TinyMce4 dom добавить элемент с draggable (jquery)

Question

Привет, я использую TineMce4.

Я создаю новый плагин, который добавляет новый элемент (p) в текстовый редактор.

Теперь мне нужно сделать в элементе, который я добавил -> перетащить/перетащить и перетащить с-> (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);