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

Question

我真的很喜欢 tinymce 版本 4x，但是当我尝试使用它时，我遇到了问题，当我使用代码示例时，它在 tinymce 编辑器中完美运行，但我想在标签中显示它，这是我的 trouble.Please 如果你有任何想法，请告诉我。 感谢您的帮助。

Answer 1

更新 - TinyMCE 4.3.2 消除了 <br> 标签，这个 post 显示了如何删除，因此在 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 它应该突出显示的内容 - 它不会自动执行此操作。