TinyMCE добавить мульти элементы activeEditor.dom

Question

Я использую TinyMce4 у меня есть pluging что добавить 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

Пример:

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

Как я могу использовать tinyMCE.activeEditor.dom.add или некоторые думают, что еще добавить DIV со ссылкой (а), как вы его видите в примере

Answer 1

Я нашел решение очень простое:

вам просто нужно изменить

tinyMCE.activeEditor.getBody()

в

tinyMCE.activeEditor.dom.add (...)

к вашему элементу, что вам нужно, и это будет вставить ссылку (а) к вашему элементу

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>