javascript - 在ckeditor中显示html标签

Question

我默认打开带有以下内容的 ckeditor。

<textarea id="editor1" name="editor1" rows="30" cols="120"><p>We can use&nbsp;<strong>prettify&nbsp;</strong>to auto-format the Computer programming code at web page.</p>

<p><strong>How to use?</strong></p>

<p>Just add below line;</p>

<p><code class="prettyprint"><span style="line-height: 1.6em;">&lt;script src=&quot;https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js&quot;&gt;&lt;/script&gt;</span></code</p>

<p><span style="line-height: 1.6em;">Then, put the code line in below tab;</span></p>

<p><code class="prettyprint">&lt;code class=&quot;prettyprint&quot;&gt;...&lt;/code&gt;</code></p>

<p><span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; line-height: normal;">or,</span></p>

<p>Download the complete code files&nbsp;from&nbsp;<a href="https://code.google.com/p/google-code-prettify/">https://code.google.com/p/google-code-prettify/</a>(even can learn more about prettify)&nbsp;&nbsp;to your server and change above script tag line like below;</p>

<p><code class="prettyprint">&lt;script src=&quot;path/to/directory/run_prettify.js&quot;&gt;&lt;/script&gt;</code><br />&nbsp;</p>
</textarea>
<script>CKEDITOR.replace( "editor1");</script>

但是，在输出中缺少 HTML 标记代码。输出在下方(下划线)；

---

我们可以使用 prettify 自动格式化网页上的计算机编程代码。

如何使用？

只需添加下面一行；

然后，将代码行放在下面的标签中；

...

或者，

从https://code.google.com/p/google-code-prettify/(even下载完整的代码文件可以了解有关美化的更多信息)到您的服务器并更改上面的脚本标记行，如下所示；

---

期望输出: 请帮忙，我失踪了。

Answer 1

这看起来像这个问题中的另一个类似问题:How to prevent CKEditor from stripping < and > (greater-than/less-than)

解决方法是使用 setData 来设置值。下面是我在 4.1 样本中进行的测试。

<textarea id="editor1">
    <p>foo</p>
</textarea>
<script>
    var txt = '<p>We can use&nbsp;<strong>prettify&nbsp;</strong>to auto-format the Computer programming code at web page.</p><p><strong>How to use?</strong></p><p>Just add below line;</p><p><code class="prettyprint"><span style="line-height: 1.6em;">&lt;script src=&quot;https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js&quot;&gt;&lt;/script&gt;</span></code</p><p><span style="line-height: 1.6em;">Then, put the code line in below tab;</span></p><p><code class="prettyprint">&lt;code class=&quot;prettyprint&quot;&gt;...&lt;/code&gt;</code></p><p><span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; line-height: normal;">or,</span></p><p>Download the complete code files&nbsp;from&nbsp;<a href="https://code.google.com/p/google-code-prettify/">https://code.google.com/p/google-code-prettify/</a>(even can learn more about prettify)&nbsp;&nbsp;to your server and change above script tag line like below;</p><p><code class="prettyprint">&lt;script src=&quot;path/to/directory/run_prettify.js&quot;&gt;&lt;/script&gt;</code><br />&nbsp;</p>'
    CKEDITOR.on('instanceReady', function(ev) {
        ev.editor.setData(txt);
    });
    CKEDITOR.replace( 'editor1', { allowedContent: 'p' } );
</script>