Why does my CKEditor add garbage code?

Question

I'm using CKEditor for my back-end application.

I've installed as stated on the official documentation (pretty simple). Nevertheless, when trying to add this text for instance (I can copy/paste it from SO on this post, its exactly the same):

You don't just want people to hear you. You want them to listen.

Barraged as we are with news clips and op-eds that get linked, blogged, posted, tweeted and re-tweeted on a minute-to-minute basis, that's a lot to ask for. Countless voices across the nation drown each other out in the echo chamber of modern media. Would-be revolutions can wind up footnotes on corporate memos, and reputations can die or reincarnate in the time it takes to post a Facebook status.

For businesses and agenda-setters worldwide, this all amounts to one important question: "How do we rise above the noise and really make an impact?"

That's where we come in.

Drawing from a wealth of public relations experience in political, advocacy and corporate arenas, N** * Communications spearheads creative and downright effective communications campaigns that infiltrate national conversations and direct them to our clients' goals. Synchronizing the buzz means harmonizing the noise. Suddenly you're listened to, not just heard.

We service clients in both the nonprofit and for-profit spheres, leading projects which range from political campaign strategy to executive speechwriting. We've worked for CEOs, elected officials, political candidates from the presidential to local level, and progressive organizations from 527 groups to major national unions.

I've got something like this:

<p>
    &nbsp;</p>
<p 0px="" color:="" font-family:="" font-size:="" hear="" helvetica="" just="" line-height:="" p="" people="" style="margin: 0px 0px 10px; text-align: justify; font-size: 16px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 20px; " t="" them="" to="" want="" you="" you.="">
    &nbsp;</p>
<p 0px="" color:="" font-family:="" font-size:="" hear="" helvetica="" just="" line-height:="" p="" people="" style="margin: 0px 0px 10px; " t="" them="" to="" want="" you="" you.="">
    Barraged as we are with news clips and op-eds that get linked, blogged, posted, tweeted and re-tweeted on a minute-to-minute basis, that&#39;s a lot to ask for. Countless voices across the nation drown each other out in the echochamber of modern media. Would-be revolutions can wind up footnotes on corporate memos, and reputations can die or reincarnate in the time it takes to post a Facebook status.</p>
<p 0px="" above="" agenda-setters="" all="" amounts="" an="" and="" businesses="" color:="" do="" font-family:="" font-size:="" for="" helvetica="" how="" important="" line-height:="" make="" noise="" one="" p="" question:="" really="" rise="" style="margin: 0px 0px 10px; " the="" this="" to="" we="">
    That&#39;s where we come in.</p>
<p 0px="" a="" advocacy="" and="" buzz="" campaigns="" color:="" communications="" conversations="" corporate="" creative="" direct="" downright="" drawing="" effective="" experience="" font-family:="" font-size:="" from="" goals.="" harmonizing="" heights="" helvetica="" in="" infiltrate="" just="" line-height:="" listened="" means="" national="" new="" noise.="" not="" of="" our="" p="" public="" re="" relations="" spearheads="" style="margin: 0px 0px 10px; " suddenly="" synchronizing="" that="" the="" them="" to="" wealth="">
    We service clients in both the nonprofit and for-profit spheres, leading projects which range from political campaign strategy to executive speechwriting. We&#39;ve worked for CEOs, elected officials, political candidates from the presidential to local level, and progressive organizations from 527 groups to major national unions.</p>

Which is totally garbage and unusable, so that's what I get in the source (if I click on source) and on the database if I decide to save that text. It definitively seems to come from CKEditor itself .

Where does this problem come from?

Answer 1

I found a solution to my problem. It was because the post variable I had was passed into a trim and xss filtering pre process functions before being added to the database. That what caused such a weird behavior.

Answer 2

There may be conflicts with other JavaScript in your page, are there any other JavaScript libraries or scripts being loaded in the page?

It might be a good idea to try using a base CKEditor set up with the default configuration settings in a test page by itself. That will let you know if it's actually a problem with CKEditor.

If you still have the problem, get a fresh download of both CKEditor and jQuery and do another stand alone test page.

Answer 3

Are you sure that you're using latest version of CKEditor and that you haven't modified it in some strange way? I'm selecting, copying quoted text and pasting into the editor on http://ckeditor.com/demo and this is part of the source:

Firefox:

<blockquote>
    <p>
        You don&#39;t just want people to hear you. You want them to listen.</p>
    <p>
        Barraged as we are with news clips and op-eds that get linked, blogged, posted, tweeted and re-tweeted on a minute-to-minute basis, that&#39;s a lot to ask for. Countless voices across the nation drown each other out in the echo chamber of modern media. Would-be revolutions can wind up footnotes on corporate memos, and reputations can die or reincarnate in the time it takes to post a Facebook status.</p>
    <p>
        For businesses and agenda-setters worldwide, this all amounts to one important question: &quot;How do we rise above the noise and really make an impact?&quot;</p>

Chrome:

<p>
    &nbsp;</p>
<p style="margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; clear: both; word-wrap: break-word; color: rgb(0, 0, 0); font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; line-height: 18px; ">
    You don&#39;t just want people to hear you. You want them to listen.</p>
<p style="margin: 0px 0px 1em; padding: 0px; border: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; clear: both; word-wrap: break-word; color: rgb(0, 0, 0); font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; line-height: 18px; ">
    Barraged as we are with news clips and op-eds that get linked, blogged, posted, tweeted and re-tweeted on a minute-to-minute basis, that&#39;s a lot to ask for. Countless voices across the nation drown each other out in the echo chamber of modern media. Would-be revolutions can wind up footnotes on corporate memos, and reputations can die or reincarnate in the time it takes to post a Facebook status.</p>
<div>
    &nbsp;</div>

Now, what causes this difference between browsers and is the second source correct?

First of all - it's not CKEditor's fault, but Chrome's that it looks like this. It puts into the clipboard styled HTML and we can't do anything about this. Of course you can say that in e.g. TinyMCE you'll get just the text, without formatting. But that's a blind way of handling pasted content. This way TinyMCE loses also inline styles applied in the editor - e.g. font size. Write few words there, apply font size, copy and paste and you lose it.

So... Both outputs (Firefox's and Chrome's) are correct and that's the best we can do. However, if you really have HTML similar to what you attached, then the issue is much probably on your site.