Search code examples
javascripthtmlcssckeditorgoogle-code-prettify

display html tags in ckeditor

I am opening the ckeditor with below content as default.

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

But, in output HTML tag codes are missing. Output is below(under lines);

We can use prettify to auto-format the Computer programming code at web page.

How to use?

Just add below line;

Then, put the code line in below tab;

...

or,

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

Expecting output: expected output Please help, where I am missing.

Solution

  • This looks like another similar problem in this question: How to prevent CKEditor from stripping < and > (greater-than/less-than)

    The workaround is to use setData to set the value. Below is a test I got working in 4.1 samples. 

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