为什么tinymce会将内容移出<pre><code> tags? - or auto-close the tags?

时间:2019-06-01 13:58:45

标签: tinymce

Describe the problem... I am using tinymce in a proprietary CMS. I want to display code examples on a web page. I am using "pre" and "code" tags. Strangely, tinymce moves my code example out of the tags and puts it below the now empty "pre"/"code" tags. Or it is closing tags when it doesn't need to. Any insight into why tinymce is doing this would be greatly appreciated.

Actually, as I am typing this up, it occurs to me that possibly tinymce thinks that it needs to close the beginning and ending tags and is not actually moving anything.

Where I have searched... I have searched extensively and cannot find any examples of tinymce moving code out of tags or trying to close tags when not needed.

I did run across some responses that indicated that tinymce was not auto-closing tags, but that there was invalid html and the browser was doing the auto-closing. however, it looks to me like I have written valid html.

Show the code... Here is my code that I used to test this. keep in mind I am using a proprietary CMS.

<pre><code>
&lt;div class="pblk25"&gt;
   &lt;p&gt;blarg&lt;/p&gt;
&lt;/div&gt;
</code></pre>

I had initially used angle brackets for my example, but read that was supposed to used named entities to keep the example from being processed and displayed by the browser. Nevertheless - the result is the same each way.

Show expected and actual results... My expected result on the webpage is

<div class="pblk25">
    <p>blarg</p>
</div>

The actual result when doing "view source" is

<pre><code></code></pre>
<div class="pblk25">
<p>blarg</p>
</div>
<pre><code>
</code></pre>

Notice on the first line the appearance of </code></pre>. And on the next to last line the appearance of <pre<>code>.

Which is then displayed on the web page as

blarg

Thank you for your kind assistance with this puzzling situation.

1 个答案:

答案 0 :(得分:0)

您是否正在使用文本区域加载TinyMCE?看来您需要对整个内容进行额外的HTML编码传递。

使用TinyMCE提琴,如果将源代码粘贴到用于加载编辑器的textarea标记中,则会看到相同的结果。但是,如果我粘贴到编辑器的源代码对话框中,它将正确显示。

您看到的是关于textarea标签的不幸历史事实;浏览器似乎允许在其中包含原始HTML,但是这样做实际上是无效的。该标准说它们是HTML编码的。 Textarea内容在显示给用户(或TinyMCE)之前,先通过HTML解码器运行。这是根本不运行TinyMCE的代码:

http://fiddle.tinymce.com/uJgaab/1

为解决您的问题,HTML编码了加载到文本区域中的内容。所有这些,使得<pre>&lt;div class="pblk25"&gt;变成&lt;pre&gt;&amp;lt;div class="pblk25"&amp;gt;

http://fiddle.tinymce.com/uJgaab