Question

您好我正在使用TineMce4。

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

现在我需要制作我添加的元素 - ＆gt; draggable / drag and grop with-＆gt; （jquery的）。

我试图在这个元素中添加draggable类

这不起作用。

我认为我需要使用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);

TinyMce4 dom添加可拖动元素（jquery）

1 个答案: