Download & Extend

Editing ruins the code formatting in CKEdit

Project:Syntax highlighter
Version:7.x-2.x-dev
Component:Miscellaneous
Category:bug report
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

I have now managed to get the highlighter to work, and it looks absolutely as it should. But there's something strange happening in the edit cycle.

I'm using filtered HTML as my main format, and have added the highlighter filter to it.

When I start a new node write some text, paste in the code and add some more text. The code is marked using the {} "tags" and everything looks fine. But once I save it, the code will turn into one line, which is nicely colored, but in one line. When I go back and edit the node, it still looks nice as when i pasted it -- line breaks and all.

I think I have tried all combinations and sequences of the filters, but it seems that CKedit and the line break filter does a lot of voodoo.

The cure for this is to write the normal text and edit in CKEdit then disable rich text and then paste in the PHP-code in the right place in all the mumble-jumble. Not perfect, but doable. This preserves the line breaks, and the code looks very nice and well styled when I save the node.

But I can't edit the node any further without breaking things. Once I open it again all line breaks in the code are gone both in the editor and without. When I save I get one line, and if I edit and save it a few times it sometimes gets more and more amputated loosing parts of code.

I have tried using a plain text format with highlighter as the only filter and no editor, which will work for, but does make editing a chore when you want nice text formats, images and whatnot.
But maybe editing with HTML-codes is simply the easiest.

Has anybody else experienced something similar?
Any suggestions for a cure that lets me use the editor *and* the highlighter?

Martin

AttachmentSize
Dumps showing the convolution66.53 KB

Comments

#1

I'm getting this exact same problem. If I edit the content, then the line breaks are ruined and everything is on one line.

This makes using ckeditor and this module at the same time useless.

#2

The problem is CKEditor actively reformats input text into "proper" HTML markup. What happen is whenever it sees input like this:

<p>A paragraph of text. blah blah blah</p>

{syntaxhighlighter brush: php}
lines of program code 1
lines of program code 1
lines of program code 1
{/syntaxhighlighter}

<p>another paragraph</p>

CKEditor changes it into:

<p>A paragraph of text. blah blah blah</p>

<p>{syntaxhighlighter brush: php}lines of program code 1 lines of program code 1 lines of program code 1{/syntaxhighlighter}</p>

<p>another paragraph</p>

You can see this happening easily by first "Switch to plain text editor", paste the raw input, "Switch to rich text editor", then "Switch to plain text editor" to see the text changed.

TinyMCE is the same way and the wysiwyg_syntaxhl solves this exact same problem. There is a TinyMCE plugin in that module that takes care of the syntaxhighlighter code block in and out of the TinyMCE editor. So you need the same kind of plugin for the CKEditor. Ask the maintainer of wysiwyg_syntaxhl to see if he can create a plugin for CKEditor.

or use Full HTML and the <pre> tag to markup your code (but only for trusted users because of Full HTML).

#3

#1, your highlighted code has <br> string at the end of every line. This is because the "Line break converter" filter is in front of the Syntaxhlighter filter. Reverse that to fix this problem.

Order the filters as follow:

+ HTML filter (or Wysiwyg filter or whatever HTML filter you use)
+ Syntax highlighter
+ Line break converter

#4

Version:7.x-1.1» 7.x-2.x-dev

Try the 7.x-2.x-dev version. I've made it rich text editor friendly by just using the pre tag for the filter.

Instead of:

{syntaxhighlighter class="brush: php"}
code...
{/syntaxhighlighter}

Do:

<pre class="brush: php">
code
</pre>

If your code have HTML or entity strings, you have to escape them (this part was automatic handled before but cannot be done with this change).

For example, if you syntax highlight HTML code:

<pre class="brush: xml">
<html>
  <head>
  </head>
  <body> &lt;
  </body>
</html>
</pre>

you must change the code to:

<pre class="brush: xml">
&lt;html>
  &lt;head>
  &lt;/head>
  &lt;body> &amp;lt;
  &lt;/body>
&lt;/html>
</pre>

#5

sub