tinymce "codesample" 插件执行 HTML 标签答案

【问题标题】：tinymce "codesample" plugin executes HTML tagtinymce "codesample" 插件执行 HTML 标签
【发布时间】：2016-08-09 13:56:02
【问题描述】：

我正在使用在我的自定义门户中https://www.tinymce.com/docs/plugins/codesample/ 提到的 tinymce 的代码示例插件。

一切正常，直到我必须“重新编辑”存储在数据库中的数据。

当我去编辑时，所有数据都存储在数据库内

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

被剥离并显示为 only

<pre><code>Text </code></pre>

从“工具>源”查看时

我已经在我的文本区域中使用“htmlentities”，例如：-

<textarea><?php echo htmlentities($content); ?></textarea>

它仍然会去除codesample插件创建的标签内使用的所有html标签。

常见问题解答： 1. 第一次添加数据时一切正常。 2.问题只是当我去编辑页面时。 Tinymce 仅从 codesample 插件中剥离 HTML 代码。其余所有使用代码示例添加的代码，如“css、python、php”等，都显示在编辑器中。

【问题讨论】：

htmlentities 对已经转换为 html 实体的文本没有影响。您的问题可能出在其他地方。
数据库中的原始数据是什么样的？确定是否在保存或检索所述数据时发生此 htmlentities 更改。
正是，它在tinymce的“工具>源代码”中。

标签： php tinymce-4 tinymce-plugins

【解决方案1】：

将数据插入tinymce的正确方法不是打印出来，甚至使用htmlentities。考虑以下代码

<div class="editor" id="editor">
</div>
<script>
    tinymce.init({
      selector: 'div.editor',
      theme: 'inlite',
      plugins: 'image table link paste contextmenu textpattern autolink',
      insert_toolbar: 'quickimage quicktable',
      selection_toolbar: 'bold italic | quicklink h1 h2 h3 blockquote',
      inline: true,
      paste_data_images: true,
      automatic_uploads: true,
      init_instance_callback : function(ed) {
        // ed.setContent("<h1>Title</h1><p>Content...</p>");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
           if (xhttp.readyState == 4 && xhttp.status == 200) {
              ed.setContent(xhttp.responseText);
           }
        };
        xhttp.open("GET", "content.php", true);
        xhttp.send();
      },
      content_css: [
        '//www.tinymce.com/css/codepen.min.css'
      ]
    });
</script>

文件content.php 应该只打印html内容

<?php
    $content = ''; // Fetch from database
    print $content;
?>

在我初始化 tinymce 时，请注意 init_instance_callback 处的函数。也就是tinymce初始化后调用的函数。现在，直接在编辑器中使用print，在init_instance_callback 中进行ajax 调用并在那里渲染。我已经放入了一个示例注释行，只是为了帮助您解决同样的问题。这还将负责安全验证（如果有，则不执行脚本标记）。

同时获取编辑器的内容同时保存到数据库是

var content = tinyMCE.get('editor').getContent();

然后你可以发出一个ajax post请求将数据保存到数据库。

现在为什么我使用 ajax 很重要。我尝试了很多其他方法，我可以直接打印它。但这会导致一个安全漏洞，因为脚本标签可以在编辑器初始化之前运行。

我在这个例子中使用了 div，但即使是文本区域也是一样的。也不要使用 htmlentities，因为这会转义 html 内容，并且您希望看到在 tinymce 中呈现的内容，而不是转义的版本。

【讨论】：

我之前尝试过，实例回调，但是我在ajax模式下保存数据后尝试了这个。
由于内容位于多行中，它会给出Invalid or Unexpected token error - 如何避免这种情况？
@JohnCargo 你能发布一些sn-p，这样我可以提供更好的帮助:)
片段？我的$content = "这是带有换行符的 HTML 行 \n 和一些带有换行符的 html 代码 \n"
@JohnCargo 阅读我的回答，您不能在同一个请求中呈现。当编辑器在init_instance_callback 中加载时，您需要发出不同的 ajax 请求，然后才能在 tinymce 中使用 setContent 渲染它。在我设置内容的示例中，使用 ajax 调用获取该内容

【解决方案2】：

好的，经过大量研究，我发现这是一个编码问题。需要对每个实体进行编码，例如：- &amp;lt; ， &gt; 到 &amp;lt; ， &gt; 。

并且<code>标签内的&amp;字符变为&amp;，这意味着<code></code>标签内的&amp;lt;变为&amp;lt;。

因此，代码如下：-

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

应该像

&lt;pre&gt;&lt;code&gt;&amp;lt;html&amp;gt; &amp;lt;p&amp;gt;Text&amp;lt;/p&amp;gt; &amp;lt;/html&amp;gt; &lt;/code&gt;&lt;/pre&gt;

因此，对于所有正在寻找解决方案的用户。这就是解决方案。

请记住，&amp; 内的 <code> &amp;lt; </code> 标记只能转换为 &amp; 。注意 &amp;lt;里面<code>标签是&amp;lt;

干杯

【讨论】：

【解决方案3】：

一旦 TinyMCE 被加载，使用 setContent 函数添加内容：

setup: function (editor) {
    editor.on('init', function () {
    var theContent = '<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>';
    this.setContent(theContent);
    });
}

来源：Tags Get Removed When Using Codesample Plugin with TinyMCE

【讨论】：

不知道为什么这被标记了，它是一种有效的方法:)

【解决方案4】：

抱歉，我发现 TinyMCE 在处理“代码”时过于复杂。我忍受了无数的 &n b s p ;随处可见 - 但我只为代码 sn-ps 添加图像或链接到模式弹出窗口。

【讨论】：