Question

我正在使用tinymce的codesample插件，我在自定义门户网站中提到https://www.tinymce.com/docs/plugins/codesample/。

一切正常，直到，我必须＆＃34;重新编辑＆＃34;数据存储在数据库中。

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

中的数据库中

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

被剥离并仅显示为

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

从＆＃34;工具＆gt;查看时源＆＃34;

我已经在使用＆＃34; htmlentities＆＃34;在我的textarea中： -

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

它仍会删除codesample插件创建的标记内使用的所有html标记。

常见问题： 1.第一次添加数据时一切正常。 2.问题仅在我去编辑页面时。 Tinymce仅剥离codesample插件中的HTML代码。使用代码示例添加所有已添加的代码，例如＆＃34; css，python，php＆＃34;等，在编辑器中显示。

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

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

&内的<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>只应转换为&。 {strong} <标记内的注意 <code>为&lt;

干杯

Answer 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

Answer 4

很抱歉，但是我发现TinyMCE在处理“代码”时过于费解。我忍受了众多的;随处可见-但我只能通过添加图像作为代码段或链接到模式弹出窗口来实现。

tinymce＆＃34; codesample＆＃34;插件执行HTML标记

4 个答案: