Let's say I have a plain <p> element, which would look like this in source view:
<p>Blah blah</p>
Working in rendered view, if I copy and paste that element the copy ends up looking like this:
<p><span style="font-size: 15px; line-height: 19px;">Blah blah\</span></p>
How can I configure CKEditor to prevent the introduction of the extra span tag?
Thanks,
Mike
First of all, that <span> is
First of all, that <span> is not introduced by CKEditor, but by Chrome (which I suppose you use). Since version 4.1 CKEditor filters out element and its attributes which are not allowed by the configuration. E.g. in standard preset CKEditor would remove whole <span>. Read more in the Advanced Content Filter guide.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
I did not realize that Chrome
I did not realize that Chrome was generating the extra content. I would like to preserve the default settings for config.allowedContent, and add permission to accept <script> tags. I do not see any documentation on how to augment default settings, only documentation on how to completely replace default settings. How can I do this?
Thank you,
Mike
This topic has not been
This topic has not been discussed in any depth in any docs that I could find. I am still looking for the information I need. I tried posting on StackOverflow but got no response. Help!
Thanks, Mike
You're saying this section
You're saying this section needs improving? Some constructive criticism on how you would like it improved is appreciated.
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
I believe I expressed the
I believe I expressed the information that was lacking in these posts and the StackOverflow posting. What else would be helpful?
Thanks, Mike
There were there of us
There were there of us commenting and the thread ended not on yours comment, but Nanotlep's whose explaination is IMO complete. You try to achieve more than is possible or did not explain the problem clearly enough. Also, you mentioned unrelated topic in one of your comments (Chrome creating spans) and if I'm not sure if you don't want a solution for that problem. In this case you should ask another question, because the one about augmenting default ACF rules was answered.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Reinmar, thanks for letting
Reinmar, thanks for letting me know how my query was understood. I will attempt to rephrase it.
My goal is to deliver high-quality HTML from CKEditor to the database. Our Chrome users find that HTML that they generate from a CKEditor session is badly polluted. We have installed the full complement of CKEditor plugins, plus a few more. The challenge we face is that the CKEditor documentation does not seem to describe in terms that we understand how we could configure the CKEditor filtering feature such that spurious tags and attributes are removed. I can imagine the following possiblities, not sure if they are all supported, however:
Two additional sources of problems:
The only way forward wih the available information that I can see would be to spend time figuring out how to handcraft rules sufficient to allow each combination of HTML used on our site, and write a lot of tests that compare the filtered HTML to the desired HTML. This seems painful and will require maintenance each time a plugin is updated, or a new plugin is installed, or CKEditor is updated. I am hoping that there is a better way.
Thank you, Mike
Looking into this a bit further..
A test in a Mozilla browser shows that pasting plaintext into a contenteditable div without CK loaded results in no anomalies, the innerHTML of the div being exactly what was pasted. However, pasting as HTML results in the parent styling being lost even though there is nothing in the pasted HTML's tags that should override the styling.
Pasting plaintext with CK loaded always results in any open styling tags being closed out , the text pasted, then styling tags reopened.
A test with TinyMCE reveals that it does the same thing as CK. Thus, CK's behaviour is no different from the other well-known js editor, however both behave in a rather problematic manner in that you are forced to type text manually or else lose the container element's styling on the pasted text. So, whilst this may not literally be a bug, it's damn awkward.
Thus, it looks as if these editors may be treating pasted plaintext as if it were pasted HTML. That would be my guess, anyway,
I see this behavior as well.
I see this behavior as well. Furthermore, I also see lots of extra attributes and span tags generated, apparently from Chrome. Was allowedContent intended to address these issues?
My postings in this thread are directed towards whatever is necessary to get clean HTML, and is not inteded to be restricted to any specific technique, such as allowedContent. Apologies if this was not clear before.
Mike
Chrome
Tested Chrome 31.0.1650.63 with CK4.0.2 and CK4.2 using direct-to-page editing mode, and found the pasting behavior to exactly match that of Firefox. No additonal spans or whatever. Which was interesting. I've yet to set up CK4.2.3 so no test on that. Maybe the Chrome issues only occur under specific conditions. HTH.
Here is an example. In
Here is an example. In rendered mode, I select HTML which is rendered from this source:
<p>Source code for this lecture is provided in <code>courseNotes/src/main/scala/Fun.scala</code>.</p>
I copy/paste it (in HTML rendered mode) and get this:
<p style="line-height: 19px;">Source code for this lecture is provided in <code style="font-size: 15px;">courseNotes/src/main/scala/Fun.scala</code>.</p>
Another example:
<h3>Binding to a variable</h3>
Turns into this after copy/paste:
<h3 style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: rgb(51, 51, 51);">Binding to a variable</h3>
Do you not see this behavior?
Thanks, Mike
Confirmed this.
Yes. Pasting the the <code> example from Firefox into Chrome sometimes gives rise to a screed of garbage including four nested divs that weren't in the original, with some weird css attributes attached. Whether it does or not seems to depend on the surrounding markup in the recipient page.
It also happens when pasting straight into a simple div with contenteditable=true set, so it's nothing to do with CK.
Test code consists of:
<div onContextMenu='alert(this.innerHTML); return false' contenteditable=true >Insert text here</div>
..and you rightclick to see what's pasted. It can be hard to replicate though, it took me several tries with the test code nested inside various other tags.
I don't know if the
I don't know if the surrounding page is a contributing factor, but I can say that even cutting and pasting a single word introduces lots of spurious HTML. The extra HTML is reproducible and predictable.
I could write server-side code to that runs some regexes and purges the extra stuff, but it seems wrong that I should have to resort to that.
Surely I am not the first person to ever report this problem? Is this issue just taken for granted, as in, "that's just the way it is"? Is there no workaround?
Mike