TinyMce向activeEditor.dom添加多個元素

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

我需要在這個div內使用href和class的元素Link（a）

例：

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

我如何使用tinyMCE.activeEditor.dom.add或其他想法添加帶有link（a）的div，就像您在示例中看到的那樣

Answer 1

我發現解決方案非常簡單：

你只需要改變

tinyMCE.activeEditor.getBody（）

在

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

到您需要的元素，這會將Link（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>