我将默认打开以下内容的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/(even下载完整的代码文件可以了解有关Prettify的更多信息到您的服务器,并更改脚本标记行,如下所示;
预期输出:
请帮助,我想念的地方。
最佳答案
这看起来像是此问题中的另一个类似问题: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 <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>