TinyMce4 dom Element hinzufügen mit ziehbarem (jquery)

Question

Hallo, ich benutze TineMce4.

Ich baue ein neues Plugin, das neues Element (p) zu meinem Texteditor hinzufügen.

Jetzt muss ich im Element machen, dass ich hinzugefügt habe -> ziehbare/Drag und grop mit-> (jquery). Dies funktioniert nicht

dieser Elementklassen von ziehbar hinzufügen

ich versuchte.

ich denke, dass ich die jquery MyElemet.draggable() verwenden muss; auf dieses Element, aber ich weiß nicht wie.

Wissen Sie, wie man ein Element erstellt, das ich zum Text editior ziehbar hinzufüge?

Mein Code:

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

ich diese Lösung gefunden, die Sie benötigen $ verwenden (editor.getBody()) nach Klasse finden, und es dann ziehbar machen. Hier

ist der aktualisierte Code von 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(); 

     }), 

Voll Code:

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