TinyMCE 4 insertContent（）;不正確的行爲

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>'); 

它讓我更加好奇sult

<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