TinyMce4 dom add（jquery）でドラッグ可能な要素を追加する

Question

こんにちは私はTineMce4を使用しています。

私は、テキストエディタに新しい要素（p）を追加し、新しいプラグインを構築します。

今、私が追加した要素に加える必要がある - >ドラッグ可能/ドラッグ＆grop with->（jqueryの）。

私は、これが動作していないこの要素

にドラッグ可能のクラスを追加しようとしました。

iは、i）は（jqueryのMyElemet.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);