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 里面的元素 Link(a) 和 href 和 class

示例：

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

我如何使用 tinyMCE.activeEditor.dom.add 或其他人认为添加 div 和 link(a) 就像您在示例中看到的那样

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>

TinyMce 添加多个元素到 activeEditor.dom

TinyMce add multi elements to activeEditor.dom

javascript

tinymce

tinymce-4

tinymce-plugins