TinyMce4 dom 添加可拖动元素 (jquery)

Question

您好，我正在使用 TineMce4。

我构建了一个新插件，可以将新元素 (p) 添加到我的文本编辑器中。

现在我需要制作我添加的元素 --> draggable/drag 并与 -> (jquery).

我尝试向该元素添加类可拖动

这不起作用。

我认为我需要使用 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()) find by class ，然后使其可拖动。

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

TinyMce4 dom 添加可拖动元素 (jquery)

TinyMce4 dom add element with draggable (jquery)

javascript

jquery

tinymce

orchardcms

tinymce-4