[英]display html tags in ckeditor
我將默認打開以下內容的ckeditor。
<textarea id="editor1" name="editor1" rows="30" cols="120"><p>We can use <strong>prettify </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;"><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script></span></code</p>
<p><span style="line-height: 1.6em;">Then, put the code line in below tab;</span></p>
<p><code class="prettyprint"><code class="prettyprint">...</code></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 from <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) to your server and change above script tag line like below;</p>
<p><code class="prettyprint"><script src="path/to/directory/run_prettify.js"></script></code><br /> </p>
</textarea>
<script>CKEDITOR.replace( "editor1");</script>
但是,輸出中缺少HTML標記代碼。 輸出低於(下划線);
我們可以使用prettify在網頁上自動設置計算機編程代碼的格式。
如何使用?
只需添加以下行;
然后,將代碼行放在選項卡下面;
...
要么,
從https://code.google.com/p/google-code-prettify/下載完整的代碼文件(甚至可以了解有關prettify的更多信息)到您的服務器,並按如下所示更改上面的腳本標記行;
預期輸出: 請幫助,我想念的地方。
這看起來像是該問題中的另一個類似問題: 如何防止CKEditor剝離<和>(大於/小於)
解決方法是使用setData設置值。 以下是我在4.1示例中進行的測試。
<textarea id="editor1">
<p>foo</p>
</textarea>
<script>
var txt = '<p>We can use <strong>prettify </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;"><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script></span></code</p><p><span style="line-height: 1.6em;">Then, put the code line in below tab;</span></p><p><code class="prettyprint"><code class="prettyprint">...</code></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 from <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) to your server and change above script tag line like below;</p><p><code class="prettyprint"><script src="path/to/directory/run_prettify.js"></script></code><br /> </p>'
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.setData(txt);
});
CKEDITOR.replace( 'editor1', { allowedContent: 'p' } );
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.