The forum operates in read-only mode. Please head to StackOverflow for support.

Wed, 05/01/2013 - 20:24

tonymx227

Joined: 24/04/2013

Posts: 9

HTML Codes is executed and reformated in my CKEditor Textarea

Hello everyone,

I got an issue when I try to add some HTML codes, my HTML is executed in the CKEditor Textarea. I mean, all my HTML codes have changed of place in my Textarea, so how can I fix it?

Before the adding :

<pre><div>toto</div></pre>

In my database :

<pre><div>toto</div></pre>

In my Textarea when I wanna edit :

<pre>&nbsp;</pre><div>toto</div>

Mon, 05/06/2013 - 20:55

tonymx227

Joined: 24/04/2013

Posts: 9

Someone?

Mon, 05/06/2013 - 22:33

scottseeker

Joined: 06/05/2013

Posts: 8

I'm not sure if this is what you're after. But CKEDITOR seems to add a lot of white space, I added these rules to mine to prevent ckeditor from inserting space. Also I disabled 'pre' because it doesn't store well in a DB.

CKEDITOR.on('instanceReady', function(e) {
    //alert("handler 1");
    var writer = e.editor.dataProcessor.writer;
    // The writing rules for the <p> tag.
    var rules = {
        // Indicates that this tag causes indentation on line breaks inside of it.
        indent: false,
        // Inserts a line break before the <p> opening tag.
        breakBeforeOpen: false,
        // Inserts a line break after the <p> opening tag.
        breakAfterOpen: false,
        // Inserts a line break before the </p> closing tag.
        breakBeforeClose: false,
        // Inserts a line break after the </p> closing tag.
        breakAfterClose: false
    };
    writer.setRules('p', rules);
    writer.setRules('ul', rules);
    writer.setRules('li', rules);
    writer.setRules('ol', rules);
    writer.setRules('blockquote', rules);
    writer.setRules('table', rules);
    writer.setRules('theader', rules);
    writer.setRules('tbody', rules);
    writer.setRules('tr', rules);
    writer.setRules('td', rules);
    writer.setRules('caption', rules);
    writer.setRules('hr', rules);
    writer.setRules('div', rules);
    writer.setRules('address', rules);
    writer.setRules('pre', rules);

});

Sat, 05/11/2013 - 23:14

tonymx227

Joined: 24/04/2013

Posts: 9

I put your code in my config

I put your code in my config.js file but I get the same issue...

In my database : <pre class="html " data-pbcklang="html"><div>toto</div></pre><p>totoppppppp</p>

In my textarea : <pre class="html " data-pbcklang="html"><br></pre><div>toto</div><p>totoppppppp</p>

Sun, 05/12/2013 - 17:58

reinmar

Joined: 24/08/2012

Posts: 631

<pre> element allows only

<pre> element allows only phrasing content (inline stuff) inside - http://www.w3.org/TR/html-markup/pre.html - so CKEditor is fixing this invalid HTML.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Mon, 05/13/2013 - 00:27

tonymx227

Joined: 24/04/2013

Posts: 9

Another plugin

So, do you know another plugin to publish code snippets?

Mon, 05/13/2013 - 08:13

Anna

Joined: 14/12/2010

Posts: 1369

See the Insert Pre plugin (it

See the Insert Pre plugin (it is used on our forum, too).

There are some code highlighters available, too, just check the Add-ons Repository.

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!

Tue, 05/14/2013 - 05:07

tonymx227

Joined: 24/04/2013

Posts: 9

Same thing...

I get the same thing...

The code into the PRE have moved... I think the problem is from CKEDITOR but where I don't know... Somewhere the content of a PRE tag is changed...

I use ExpressJS for the back-end, maybe it's the issue...

Tue, 05/14/2013 - 09:11

(Reply to #8) #9

alfonsoml

Joined: 31/12/2006

Posts: 3735

The code in your database is

The code in your database is wrong.

It should be

<pre class="html " data-pbcklang="html">&lt;div&gt;toto&lt;/div&gt;</pre><p>totoppppppp</p>

if you want to see the text

<div>toto</div>

in your final page.

BTW Anna, I didn't realize that the Pre button was enabled.

Thu, 05/16/2013 - 05:10

#10

tonymx227

Joined: 24/04/2013

Posts: 9

Ok, so, what I have to do?

You found my issue ! (All my apologies to Reinmar, because he already said me this and I didn't understand...)

function escapeHtml(text) {
  return text
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Thank you.