顯示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>