I wanted to show a "<p>" as formatted "computer code" in a paragraph. I simply cannot get CK Editor to not try and create a paragraph from it--I have to add spaces between the brackets and the 'p'. Seems like it's doing this for 'div' as well, which makes me wonder if block elements inside <code> don't work correctly. I've tried using the entities, as well as just typing the brackets and letting CKE convert them to entities, but by the 2nd time I save, CKE tries to make another paragraph.
Here's a clip from the article I wrote that shows what I was trying to do:
And the source output from CKE after saving:
CKE Ignores the "<code>" and tries to do something with the tag inside.
If I simply type "<p>", select it, and then choose 'Computer Code" from the styles dropdown, it initially looks like what I would expect. But after saving my entry and looking at the source of the CKE instance, I see it was converted to
Why does <code> not just convert all the entities within it? And why, If I enter the brackets as entities myself, does CKE eventually try and create a block element out of what I typed? Is there a config setting I'm missing? Thanks.
Here's a clip from the article I wrote that shows what I was trying to do:
"...run into odd output wrapped in extra <code><p></code> tags or entirely broken templates."
"...run into odd output wrapped in extra <code><p></code> tags or entirely broken templates."
And the source output from CKE after saving:
run into odd output wrapped in extra</p> <p> tags or entirely broken templates.</p>
CKE Ignores the "<code>" and tries to do something with the tag inside.
If I simply type "<p>", select it, and then choose 'Computer Code" from the styles dropdown, it initially looks like what I would expect. But after saving my entry and looking at the source of the CKE instance, I see it was converted to
<p> </p>
Why does <code> not just convert all the entities within it? And why, If I enter the brackets as entities myself, does CKE eventually try and create a block element out of what I typed? Is there a config setting I'm missing? Thanks.
Re: <p> inside <code> tries to create a paragraph
It doesn't seem to have anything to do with actual `<code>` tags though; I think the actual problem is that CKEditor automatically converts bracket entities to actual brackets when initializing. So if the saved field HTML is:
CKEditor will automatically convert the `<` and `>` entities to `<` and `>` while initializing, and then parse it as an actual `<p>` tag. It will then fix the now-incorrect HTML syntax by adding a closing `</p>` immediately before the `<p>`.
I’ve tried adding a new regex to config.protectedSource that protects all markup within `<code>` and `</code>`, but that doesn’t actually kick in early enough; all it did was prevent CKEditor from adding the extra closing `</p>`.
Re: <p> inside <code> tries to create a paragraph
Short of solving this, any other tips for presenting source code that may contain standard block elements when using CKE are appreciated.
Re: <p> inside <code> tries to create a paragraph
On, similar problem I viewtopic.php?f=5&t=15864
Re: <p> inside <code> tries to create a paragraph
As Brandon said, I think the main problem is that CKE should maybe leave these entities alone when initializing: <code><p></code> because they are inside <code> tags.
Re: <p> inside <code> tries to create a paragraph
Another example from today:
<pre>{exp:whatever} dslfglbjbsf gljkbsfth <p>something here {foobar}</p> you really have to be <br /> careful with html elements <br /> {/exp:whatever} </pre>Switching from source to the main window, and then back to source resulted in:
<pre>{exp:whatever} dslfglbjbsf gljkbsfth </pre> <p> something here {foobar}</p> <pre> you really have to be careful with html elements {/exp:whatever} </pre>Where the breaks were rendered and the paragraph was taken literally. Can someone help with a config setting that will help CKE ignore formatting elements inside code/pre tags? Or is there general wisdom here, like...don't ever put any HTML elements inside code tags?
Before:
After:
Attachments:
Re: <p> inside <code> tries to create a paragraph
If it's worth anything, I can report this is happening too. I'm using Brandon Kelly's Wygwam. It's converting the less than and greater than signs, when placed as entity code, even if between pre and code tags.
Re: <p> inside <code> tries to create a paragraph
Re: <p> inside <code> tries to create a paragraph
I am using GeSHi filter to display code. See the step by step directions at http://peterpetrik.com/blog/ckeditor-and-geshi-filter
Re: <p> inside <code> tries to create a paragraph
In a normal HTML page, if you have <code><p></code> in the source, the browser will print "<p>" (the textual representation of it, not the element itself) on the screen. That's why entities are allowed inside <code> and are converted accordingly.
A very simple example is the need of printing "</code>" in the page. You need to do have <code></code></code> for that. Certainly we can't expect <code></code></code> to work, right?
So, if the entity itself is to be printed on the screen, of course we need to encode it, so <code>&lt;p&gt;</code> comes out. This is definitely correct.
But of course, we're talking about a WYSIWYG editor. So, the end user simply types "<" in the editor and it'll automatically convert it to &.
But developers... dear developers... they go to the Source view and paste their plain code there, expecting it to magically appear correctly (or the way they want). It'll not happen... and that's ok, because the editor is not able to understand if the entity, for example, is there to be printed as "<" or "<".
To solve this, you can either try the Paste as Plain Text (or even plain CTRL+V) feature on the wysiwyg view (not on Source). It'll paste your code properly, encoding all entities for you.
There are also "syntax highlight" plugins on the web, which can definitely be handful as well.
Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn