如何实例tinxce版本4x的代码示例？

Question

我真的很喜欢tinxce版本4x，但是当我试图使用它时，我有一个问题，当我使用codeample它在tinymce编辑器中完美地工作，但我想在标签中显示它，它＆＃39我的麻烦。请告诉我你是否有任何想法。 谢谢你的帮助。

Answer 1

更新 - TinyMCE 4.3.2删除了此帖子显示如何删除的<br>标记，因此4.3.2或更高版本中不需要步骤3.

解决这个问题的关键是知道TinyMCE依赖于Prism.js来提高语法突出显示能力。

如果您想从TinyMCE中提取内容并将其显示在其他地方，您需要...

第1步：在您的信息页中加入Prism.js和prism.css - 这些信息可以从Prism网站下载。

步骤2：使用TinyMCE的API从编辑器中提取内容。例如：

var htmlToLoad = tinyMCE.get('area3').getContent();

第3步：使用简单的换行符替换内容中的所有<br />元素：

var htmlToLoad = tinyMCE.get('area3').getContent();
htmlToLoad = htmlToLoad.replace(/<br \/>/g,'\n');

你需要这样做，因为Prism的高亮功能（参见步骤5）将删除<br />标签，导致间距看起来不像TinyMCE中那样。

步骤4：将内容放入HTML块元素中：

document.getElementById("result").innerHTML = htmlToLoad;

步骤5：运行Prism的高亮功能

Prism.highlightAll();

这会触发Prism重新评估DOM应该突出显示的内容 - 它不会自动执行此操作。