tinymce "codesample" 插件执行 HTML 标签

Question

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

一切正常，直到我必须"re-edit"将数据存储在数据库中。

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

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

被剥离并仅显示

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

从 "Tools > Source"

查看

我已经在我的文本区域中使用 "htmlentities"，例如 :-

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

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

常见问题解答： 1. 第一次添加数据时一切正常。 2. 问题只出现在我去编辑页面的时候。 Tinymce 仅从 codesample 插件中删除 HTML 代码。其余使用 "css,python,php" 等代码示例添加的所有代码都显示在编辑器中。

Answer 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 中呈现的内容，而不是转义版本。

Answer 2

加载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);
    });
}

来源：

Answer 3

好的，经过大量研究，我发现这是一个编码问题。需要对每个实体进行编码，例如：- < , > 到 < , > .

和 <code> 标签内的 & 字符到 & ，这意味着 <code></code> 标签内的 < 变为 &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;

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

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

干杯

Answer 4

抱歉这么说，但我发现 TinyMCE 在处理 "code" 时太复杂了。我忍受了无数 & n b s p ;无处不在——但我只是为代码片段添加图像或链接到模式弹出窗口。

tinymce "codesample" 插件执行 HTML 标签

tinymce "codesample" plugin executes HTML tag

php

tinymce-4

tinymce-plugins