TinyMCE 4 插入内容（）；行为不正确

Question

我得到了一个 TinyMCE 编辑器实例运行。并且

tinyMCE.activeEditor.insertContent('<div class="row"><div class="col-md-6"></div><div class="col-md-6"></div></div><div class="row"><div class="col-md-12"></div></div>');

这应该生成：

<div class="row"><div class="col-md-6"></div><div class="col-md-6"></div></div><div class="row"><div class="col-md-12"></div></div>

但它生成的不是那个：

<div class="row">&nbsp;</div>
<div class="row">&nbsp;</div>

当我一步步做的时候:

tinyMCE.activeEditor.insertContent('<div class="row">&nbsp;');
tinyMCE.activeEditor.insertContent('<div class="col-md-6">&nbsp;</div>');
tinyMCE.activeEditor.insertContent('<div class="col-md-6">&nbsp;</div>');
tinyMCE.activeEditor.insertContent('&nbsp;</div>');
tinyMCE.activeEditor.insertContent('<div class="col-md-12">&nbsp;</div></div>');

这让我更加好奇

<div class="row">&nbsp;
<div class="col-md-6">&nbsp;
<div class="col-md-6">&nbsp;&nbsp;
<div class="col-md-12">&nbsp;</div>
</div>
</div>
</div>

我错过了什么？？？我应该使用另一个标签而不是 insertContent 吗？

尝试inyMCE.execCommand也不行。

tinyMCE.execCommand('mceInsertContent',false,'<div class=row><div class=col-md-6></div><div class=col-md-6></div></div><div class=row><div class=col-md-12></div></div>');

Answer 1

insertContent 用于纯文本。 setContent 适用于 HTML。但是 setContent 一次只能添加一层 HTML。解决这个问题的方法是使用 dom.add()。这将允许您创建一个父元素并允许您向其添加子节点。

HTML

<form>
    <textarea></textarea>
</form>

JS

//get inner element 'col-md-6'
//number is how many elements 
function getColMd6(number){
  var html = "";
  for(var i = 0; i < number; i++){
    html += '<div class="col-md-6"></div>';
  }
  return html;
}

//get inner element 'col-md-12'
function getColMd12(number){
  var html = "";
  for(var i = 0; i < number; i++){
    html += '<div class="col-md-12"></div>';
  }
  return html;
}   

tinymce.init({
    selector: 'textarea'
});

//Last parameter lets you specify extra inner html
tinymce.activeEditor.dom.add(tinymce.activeEditor.getBody(), 'div', {class: 'row'}, getColMd6(2));//or just plain html string at last param
tinymce.activeEditor.dom.add(tinymce.activeEditor.getBody(), 'div', {class: 'row'}, getColMd12(1));//or just plain html string at last param

这是一个工作示例DEMO

TinyMCE 4 插入内容（）；行为不正确

TinyMCE 4 insertContent(); not behaving correctly

jquery

tinymce

tinymce-4