tinymce“codesample"插件执行HTML标签 - tinymce "codesample" plugin executes HTML tag

我使用的是tinymce的代码样例插件，在这里提到https://www.tinymce.com/docs/plugins/codesample/在我的自定义门户。

一切都很好，直到，我不得不"重新编辑"存储在数据库中的数据。

当我去编辑，所有的数据存储在数据库

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

被去掉，只显示为

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

从"工具>源代码"查看

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

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

它仍然剥离所有使用在codesample插件创建的标签内的html标签。

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

插入数据到timece的正确方法不是将其打印出来，甚至使用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;
?>

请注意，当我初始化时序时，init_instance_callback的函数。这是tinymce初始化后调用的函数。现在，与其在编辑器中直接使用print，不如在init_instance_callback中进行ajax调用并在那里呈现它。我已经放入了一个示例注释行，只是为了帮助您解决相同的问题。这还将负责安全验证(如果有的话，不执行脚本标记)。

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

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

然后你可以做一个ajax post请求来保存数据到数据库。

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

我在这个例子中使用div，但它将是所有相同的文本区域。另外，不要使用htmlentities，因为这会转义html内容，您希望看到的内容以timece呈现，而不是转义后的版本。

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

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

欢呼

使用setContent函数在TinyMCE加载后添加内容:

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

来源:标签被删除时使用codessample Plugin with TinyMCE

很抱歉，但是我发现TinyMCE在处理"代码"方面太复杂了。我忍受了无数的"& &;N b s p;出现在任何地方-但我已经采取只是添加图像的代码片段或链接到一个模态弹出。