WYSIWIG editors and preservation of HTML whitespace / formatting?

Events happening in the community are now at Drupal community events on www.drupal.org.
mcurry's picture

Hi, all. I'm tinkering with the wysiwig module and CKeditor under Drupal 6 at present, and I have a concern and some questions.

I've tried using wysiwyg editors in the past, but I have never been particularly happy with the results. My main concern is preserving the raw HTML formatting/whitespace in the node body. When I switch between the normal (non-wysiwyg) view and the wysiwyg editor (and back again), wysiwyg editors seem to trash the original whitespace formatting of the HTML (and I can't see any good reason for that).

I'm sure there are ways to control this behavior in the wysiwyg editor (in this case, CKeditor) but I haven't found it yet.

What I don't understand is why wysiwyg editors' default behavior is to trash the whitespace of the original HTML source. This is a deal-breaker for me, because I want to be able to disable the wysiwyg editor (or have it disabled by default) and use the native Drupal form to edit raw HTML, and the wysiwyg editors all seem to mangle the HTML by removing the whitespace. Cleanly formatted HTML is important to me. (And no, I don't want to pass the HTML through HTML Tidy or something like that...)

Now, my questions:

  1. How to configure wysiwyg module and CKeditorto preserve the current node body HTML source whitespace? If such information is available online, no need to explain, just provide a link :D
  2. Which wysiwyg editors are good (or better) at this? Should I use something other than CKeditor?

Comments

Have you tried "Apply Source

brianmercer's picture

Have you tried "Apply Source Formatting" under Cleanup and Output? I think that's what you're getting at. http://drupal.org/node/594548#comment-3991036

Yup. Tried every option I could find. No luck

mcurry's picture

Thanks for the suggestion. I've tried tweaking that and all other wysiwyg module options, no matter what I do, I end up with HTML reformatted to remove all the line breaks. Next step is to try to hack the underlying CKEditor config manually, if there are options that will help (I've not found any yet).

And, doesn't "Apply source formatting" reformat the HTML source? What I want is a WYSIWYG HTML editor that leaves the underlying HTML formatting alone. Why? Well, because, when I decide not to use the WYSIWYG editor, I don't want to look at mangled HTML. Reformatting the source may help, but it's not really what I'm after.

It seems that JavaScript WYSIWYG editors parse the HTML DOM then rewrite the HTML on output. If that's the case, I really don't understand why they need to do this; many standalone WYSIWYG HTML editors (MS FrontPage, Visual Studio, Eclipse, etc) manage to provide visual WYSIWYG editing without altering the underlying HTML text...

While searching for more info on this behavior, I found this issue, in the CKEditor queue:

http://drupal.org/node/802136

When I disable rich-text so I can add some html code such as a div, after I save my changes and then go back to edit them later, all the spacing has been removed.

~ SNIP ~

It is simply technically impossible. You can however define in the CKEditor profile source formatting rules.

YUI Editor seems to play nice...

mcurry's picture

YUI Editor seems to play nice with the source - no reformatting takes place, so it appears to preserve the raw, underlying HTML layout. I'll check it out...

Create a new input format

choster's picture

We use a different input format, with WYSIWYG deactivated by default, for nodes where we need careful control over the source format, say a complex table with inline styleseets.

Those cases are rare. Our biggest frustration is TinyMCE adding paragraph tags around the teaser break, which can lead to some rather odd formatting as well as problems with [http://drupal.org/project/ed_readmore|Read More Link]].

That's the conclusion I'm coming to!

mcurry's picture

Thanks for the tip.

That's in line with my current thinking. You need a specific input format for the WYSIWYG editor, and, it's probably not a good idea to enable WYSIWYG editors on legacy input formats or legacy content. The line break converter seems to be a major stumbling block for most editors out of the box.

mcurry's picture

What I'm finding is that most (if not all) of these editors don't work very well with some of Drupal's features. For example, if you use the line break converter filter (the one that converts newlines into <br/> in the rendered HTML), you may not like the results with most WYSIWYG editors.

Since just about every Drupal input format I've ever used (or seen used) enables the line break converter, it's probably not a good idea to use a WYSIWYG editor with those formats -- as @choster said, it's probably better to have a special format for WYSIWYG-enabled editing, and never enable WYSIWYG operations with legacy content that depends on those formats for correct rendering (unless you want to spend time reformatting legacy node content due to inadvertent use of the WYSIWYG editor)

try this (worked for me)

shark's picture
  1. Click on 'edit' next to the profile you are using with your WYSIWYG at /admin/settings/wysiwyg/profile

  2. (Now I'm at a page like /admin/settings/wysiwyg/profile/3/edit), Under the 'Cleanup and Output' section, uncheck 'Remove linebreaks'.

did not work for me

tordeu's picture

I am also currently looking into the option of using a WYSIWYG editor (currently trying CKEditor), but I also want to be able to post the stuff for GeSHi directly in source mode.

Switching between WYSIWYG and source mode removes all line breaks and therefore the source code I want to post appears all in one line.
The only way to make this work is to edit stuff in source mode and then save it before converting to WYSIWYG mode.
The problem with that approach is that you can never edit the node again, because once you click edit everything will be stripped again.

The approach with different input formats is also not really a solution, because there is always the chance that you will strip everything by accident.

It would be nice to use a WYSIWYG editor for basic stuff, if just to have some sort of "WYSIS(omewhat)WYW(ill)Get".

Unchecking the "Remove linebreaks" weirdly did not help. But because the problem occurs even if just switching between WYSIWYG and source mode in the editor itself, I assume the problem is with CDEditor itself.

krymp's picture

Is there simply an option not to rewrite / format any of the code I pasted in? I like the WYSIWYG mode after I have the code formatted perfectly in dreamweaver.

I am finding that CKeditor rewrites my code and makes things harder to find. Also it strips out some tags which results in my node rendering the code incorrectly.

The sollution

robbdavis's picture

In TinyMCE, you can add a plugin called "code magic". This allows you to edit the html code in a nice little editor that keeps the html formatting and even highlights the tags.

AND there is even a drupal module to make it work here:

http://drupal.org/project/wysiwyg_codemagic

Using this you never even have to diable the rich text editor because you just edit the html through the plugin -button.

Hopt this helps someone.

R.

Thanks for mentioning

fizk's picture

Thanks for mentioning wysiwyg_codemagic Rob :-)

If anyone needs help with wysiwyg_codemagic, please feel free to open an issue in the issue queue.

Cheers,
Yonas

Code Magic is great!

brks's picture

I tried Code Magic, and it's great! It actually presents the code in a very clear and organized format. Code of nodes generated from feeds are not in a very good format, but when I show it in Code Magic, the setting back of different lines of code shows the structure clearly. Another module called Wysiwyg Linebreaks can also keep the linebreaks, but I just ended up using Code Magic.
Thank you so much @fizk for creating Code Mangic Drupal module! Thanks @robbdavis for letting us know!

wysiwyg_codemagic is nice.

bisonbleu's picture

wysiwyg_codemagic is nice. But note that it does not support PRE tags.

Being. Knowing. Sharing. Ip Man

FWIW, I ended up with CKEditor and a quick hack

gdesmarais's picture

I noticed that in ckeditor-3.0.js (in wysiwyg module), there was an if, around line 52, that checked for settings.apply_source_formatting. Problem is, that setting never seemed to appear. settings.simple_source_formatting did appear, so it seemed like some of the additional settings offered by ckeditor to wysiwyg were not being carried into the bootstrap code.

I modified the line 52 to:

  if (settings.apply_source_formatting || settings.simple_source_formatting) {

I know it might not be perfect, but now I do pick up the extra source formatting capability by selecting the Apply Simple Source Formatting option in the cleanup and output for ckeditor.

Wysiwyg

Group organizers

Group categories

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: