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

Question

您好，我正在使用 TineMce4。

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

现在我需要在我添加的元素中进行制作-->可拖动/拖动并用->(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()) 按类查找，然后使其可拖动。

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