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/下载完整的代码文件（甚至可以了解更多关于 prettify 的信息）到您的服务器并更改上面的脚本标记行，如下所示；

---

期望输出： 请帮助，我想念的地方。

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>