Question

自4.3.0起，TinyMCE包含可让您输入代码片段的Codesample插件。这对于不直接在浏览器中运行的Java，PHP，C＃等语言非常有效。您将代码段保存到服务器，将其加载回浏览器，编辑它，然后再将其保存回服务器 - 没有麻烦。

如果您想使用HTML，JavaScript或XML进行操作，那么在将代码片段保存到服务器后似乎无法将其加载回浏览器。尽管之前已经编码过，但大多数标签都会被移除。

请参阅TinyMCE Fiddle 1和TinyMCE Fiddle 2，试图说明问题。

有什么想法吗？非常感谢提前！

Answer 1

如果要将内容重新加载到先前存储在数据库中的TinyMCE中，我将使用TinyMCE的JavaScript API在编辑器初始化后加载数据。我创造了一个小提琴来展示你将如何做到这一点。

http://fiddle.tinymce.com/50faab/3

在此示例中，来自先前编辑的TinyMCE内容将在listView.smoothScrollToPosition(position);变量中：

theContent

（在一个真实的应用程序中，你当然会从数据库中获取它并将其注入网页而不是硬编码值）

然后我使用TinyMCE API for setContent在加载后将内容添加到TinyMCE：

var theContent = '<pre class="language-markup"><code>&lt;ul&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;/ul&gt;</code></pre>';

当你这样做时，编辑器会正确地突出显示代码示例内容（如小提琴中所示）。

setup: function (editor) { editor.on('init', function () { var theContent = '<pre class="language-markup"><code><ul><li>one</li><li>two</li></ul></code></pre>'; this.setContent(theContent); }); }标签和HTML是一个很难的组合，如果你有超出最简单的HTML的东西，所以我会避免将HTML直接放入<textarea>。

Answer 2

扩展Michael的答案，将您的内容放入隐藏的DIV中，然后获取它的html对我来说更好：

<div class="theDiv">
    <pre class="language-markup"> 
       <code>&lt;ul&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;/ul&gt;</code>
    </pre>
</div>

var theContent = $('.theDiv').html();

Answer 3

Felix Riesterer在forum of TinyMCE中的回答也可能有所帮助：

是的，就像我指出的那样：＆lt; ＆GT;和＆＃34;需要正确编码为＆lt; ＆GT;和＆＃34;因为这些字符在HTML上下文中具有特殊含义。因此，如果您想遵守规范（并且TinyMCE希望您这样做！），您需要相应地转换这些字符。没有办法解决这个问题。

是的，我忘了提及＆amp; （＆符号）需要编码为＆amp;同样。

您可能需要对内容进行双重编码：如果您想查看＆＃34;＆＃34;你需要编码＆amp; lt; h1＆amp; gt;所以HTML代码呈现为纯文本。它背后的逻辑是这样的：

1。内容被解码为原始文本（＆amp; lt;转换为＆lt;，＆amp; amp;成为＆amp;）

2.raw文本被视为编辑器内容的原始HTML代码（＆amp; lt; h1＆amp; gt;呈现为＆lt; h1＆gt;，＆lt; h1＆gt;呈现为第一级标题）

使用带有TinyMCE的Codesample插件时删除标签

3 个答案: