代码之家 › 专栏 › 技术社区 › Alex

TinyMCE 4 insertContent();行为不正确

tinymce-4 tinymce jquery

Alex · 技术社区 · 9 年前

我有一个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>

我错过了什么???我应该使用另一个标签而不是 插入内容 ?

正在尝试MCE。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>');

1 回复 | 直到 9 年前

PalinDrome555 9 年前

insertContent 用于纯文本。 setContent 用于HTML。然而 集合内容 只允许您一次添加一个级别的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

推荐文章

Jagdish Sharma · 如何使用tinymce编辑器上载图像

6 年前

Rosamunda · Tinymce可以工作,但*某些*样式不会保存到数据库(?!)

6 年前

Matteo Pietro Peru · 从tinymce表中删除填充

6 年前

Antonio Baena Guerrero · 向symfony控制器添加TinyMCE插件

6 年前

Paul · 在页面加载时替换默认WYSIWYG引擎

6 年前

wut · 在EPiServer TinyMCE 2中更改StyleSelect菜单的内容(4.7.9)

6 年前

Tassisto Nidheesh · 如何允许文本框中的图像| ASP。净核心

6 年前

Adam · TinyMCE:自动保存插件和Ajax

6 年前

dewd · 是否可以在WORDPRESS插件管理页面中从tinymce编辑器中删除或配置菜单栏?

6 年前

stackjlei · 通过包导入删除TinyMCE注册消息

6 年前