Question

我正在使用TinyMce4，我已经将div添加到我的编辑器

我的代码：

tinymce.create('tinymce.plugins.AddContent', {

    init: function (ed, url) {
     ed.addCommand('mceAddContent', function () {
     var editor = tinymce.activeEditor;
     var ed_body = $(editor.getBody());
     tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'div', { 'class': 'draggableTemplate' }, 'Add you element here...');

        }),

        // Register example button
        ed.addButton('addcontent', {
            title: 'Add content at the end',
            cmd: 'mceAddContent',
            image: url + '/img/addcontent.png',
            onclick: function () {

            }

        });

    }

});


tinymce.PluginManager.add('addcontent', tinymce.plugins.AddContent);

现在我需要的是不仅要添加div

我需要使用href和class

在div中使用元素Link（a）

示例：

<div class='draggableTemplate'> 
<a href="#scroll1" class="scrollto">Link to element</a>
</div>

我如何使用tinyMCE.activeEditor.dom.add或者其他人认为使用链接（a）添加div，就像在示例中看到的那样

Answer 1

我发现解决方案非常简单：

你只需要改变

tinyMCE.activeEditor.getBody（）

in

tinyMCE.activeEditor.dom.add（...）

到您需要的元素，这会将链接（a）插入元素

var yourElement= tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'div', { 'class': 'draggableTemplate' }, ' ');

tinyMCE.activeEditor.dom.add(yourElement, 'a', { 'href': '#scroll1'), 'class': ' scrollto ' }, 'Insert your anchor image or text first before you remove this...');

完整代码：

tinymce.create('tinymce.plugins.AddContent', {

    init: function (ed, url) {
     ed.addCommand('mceAddContent', function () {
     var editor = tinymce.activeEditor;
     var ed_body = $(editor.getBody());

    var yourElement= tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'div', { 'class': 'draggableTemplate' }, ' ');

    tinyMCE.activeEditor.dom.add(yourElement, 'a', { 'href': '#scroll1'), 'class': ' scrollto ' }, 'Link to element');



        }),

        // Register example button
        ed.addButton('addcontent', {
            title: 'Add content at the end',
            cmd: 'mceAddContent',
            image: url + '/img/addcontent.png',
            onclick: function () {

            }

        });

    }

});


tinymce.PluginManager.add('addcontent', tinymce.plugins.AddContent);

结果：

<div class='draggableTemplate'> 
<a href="#scroll1" class="scrollto">Link to element</a>
</div>

TinyMce将多个元素添加到activeEditor.dom

1 个答案: