将 Codesample 插件与 TinyMCE 一起使用时标签被删除 [英] Tags Get Removed When Using Codesample Plugin with TinyMCE

问题描述

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

Since 4.3.0 TinyMCE includes Codesample plugin that lets you enter code snippets. This works very well for languages like Java, PHP, C# etc. that are not directly running in the browser. You save your code snippet to the server, load it back into the browser, edit it, and save it back to the server again - no hassle.

如果您想使用 HTML、JavaScript 或 XML 来执行此操作，那么在将代码片段保存到服务器后似乎无法将其重新加载到浏览器中.大多数标签将被删除，尽管之前已经编码.

If you want to do it with HTML, JavaScript, or XML, then it seems not to be possible to load the code snippet back into the browser after saving it to the server. Most of the tags will be removed, despite being already encoded before.

参见 TinyMCE Fiddle 1 和 TinyMCE Fiddle 2 试图说明问题.

See TinyMCE Fiddle 1 and TinyMCE Fiddle 2 that try to illustrate the problem.

有什么想法吗?非常感谢！

Any ideas? Many thanks in advance!

推荐答案

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

If you want to reload content into TinyMCE that was previously stored in your database I would use TinyMCE's JavaScript APIs to load the data after the editor is initialized. I have created a fiddle to show how you would do this.

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

在本例中，从先前编辑中从 TinyMCE 中产生的内容位于 theContent 变量中:

In this example the content that would have come out of TinyMCE from a prior edit is in the theContent variable:

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

(在实际应用中，您当然会从数据库中获取它并将其注入网页，而不是对值进行硬编码)

(In a real application you would of course grab this from the database and inject it into the web page instead of hard coding the value)

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

I then use the TinyMCE API for setContent to add the content to TinyMCE once its loaded:

setup: function (editor) {
    editor.on('init', function () {
    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>';
        this.setContent(theContent);
    });
}

当您这样做时，编辑器将正确地语法突出显示代码示例内容(如 Fiddle 中所示).

When you do it this way the editor will properly syntax highlight the code sample content (as seen in the Fiddle).

<textarea> 标签和 HTML 是一个困难的组合，如果你有任何超越最简单的 HTML 的东西，所以我会避免将 HTML 直接放入 <textarea>.

<textarea> tags and HTML are a difficult combination if you have anything beyond the simplest of HTML so I would avoid dropping HTML directly into the <textarea>.

这篇关于将 Codesample 插件与 TinyMCE 一起使用时标签被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！