By Julien PHAM on

Hi,

Perhaps what I want is impossible to do, but I would like to have a xhtml 1.1 compliant website, and to allow authors to write articles with a wysiwyg editor... My problem is that editors seem to use align="left" for images when we want a float:left style, and so it is not xhtml compliant...

Anybody knows of a good way to have both a wysiwyg editor with image support, and a xhtml 1.1 compliant website?

Perhaps what I need is a module to translate some html code to another codes :)

Thanks

⋅ Categories: Drupal 4.7.x

Comments

Anonymous’s picture

Anonymous (not verified) commented

Which one are you using?

Your main options are TinyMCE and FCK Editor..

Lately I have not been too happy with TinyMCE and what it outputs.

I know both claim to output valid xhtml but I know TinyMCE doesn't.

Julien PHAM’s picture

Julien PHAM commented

I have tried TinyMCE and HTMLArea (which uses Xinha engine). I haven't done extensive testing of htmlarea yet, but I know TinyMCE is not xhtml compliant.

Examples : if I want to add a picture as float:left style, without an alternative text, htmlarea put :
- align=left
- border="0"
- and remove the alt=""

So those 3 things are not xhtml compliant. And even if I enter the code in html format, when I validate the story, my img tag is changed, and if I put an id for a css file inside, it is removed.

I'll have to try htmlarea. I do not know fck editor.

The ideal would be a very customizable wysiwyg editor, one we can customize the way we want to replace some tags by others. I would like in such an editor :
- the possibility to choose between < b > and < strong >, or < i > and <em>
- the possibility to tell, for instance, the editor that if the user chooses an align=left for a picture, the editor replaced it with an id tag of our choice from the css. And the possibility to hide some align stuff we do not want the user to choose.

Julien PHAM’s picture

Julien PHAM commented

htmlarea is not xhtml compliant either, it removes alt tag, it adds border tag as well, and it puts a align=left tag too...

Julien PHAM’s picture

Julien PHAM commented

I have tried a basic operation, with htmlarea and fck editor...

I have put the text "TEST", bold it, then align it to right with the included button...

In htmlarea the code :

<div align="right"><strong>TEST</strong>
</div>

It is not xhtml compliant, as div has no align attribute in xhtml 1.0 strict.

In fck, the code :

<div style="text-align: right;"><span style="font-weight: bold;">TEST</span></div>

And THIS is xhtml compliant... now I still wonder... why do they use div, instead of just a p? And why this span stuff? They could have included the second style in the same tag as the first one...

So, except for images (I have found no xhtml compliant editor for this, but it seems the w3c validor says nothing for image alignment), fck editor is the most xhtml compliant one...

Julien PHAM’s picture

Julien PHAM commented

FCK Editor seems to be the better for now, I mean it does not remove alt tag, it does not add a border tag, the code it puts seems correct, except this align="left".
And it puts styles in the style tag, which is not that bad indeed...

Oh and btw it uses bold and not strong, fine...

The problem is that what we see while composing is not the same that after... example : it puts align="left", and while composing we can see the text to the right of the picture, but when we validate the story, the text is above the picture. Of course, because align="left" is not the same as style="float:left", the only way to do that...

Other issue is that fck editor is not customizable enough... there is no easy way to setup which buttons I want on the bar...

ellanylea’s picture

ellanylea commented

I downloaded the latest version of FCK (as of Dec. 6 2006) and it uses "strong" and "em" instead of bold and italic.

-------------------------------------------------
AdAstra.ca - Optimze the Web. Optimze the World.

Julien PHAM’s picture

Julien PHAM commented

btw do you know how to activate the upload feature of fck editor?

Thanks

lorisir’s picture

lorisir commented

I just found a cool resource from tinymce's website today about making XHTML-compliant code from their editor. :-)

http://tinymce.moxiecode.com/tinymce/docs/option_valid_elements.html

Example of how to use:

tinyMCE.init({
	...
	valid_elements : "a[href|target=_blank],strong/b,div[align],br"
});

But go to the link for the full XHTML rule set. Looks like the answer to your problems if it works. Haven't had time to implement myself.

Julien PHAM’s picture

Julien PHAM commented

Thanks.
But I don't understand, where to put this tinyMCE.init stuff?

Thanks

lorisir’s picture

lorisir commented

I originally thought this would do:

Refer to:
http://drupal.org/node/47050

Post #3 says check out "line 137 of tinymce.module" to edit tinyMCE.init() parameters

But I've since looked more closely at tinymce.module and have come to think that it may be cleaner to use the following parameter extended_valid_elements:

(For more info:
http://tinymce.moxiecode.com/tinymce/docs/option_extended_valid_elements...)

And put it on line 152 in tinymce.module here to avoid clashing with any valid_elements settings being passed in on the $tinymce_settings variable:


  tinyMCE.init({
    $tinymce_settings
    extended_valid_elements ...
  });
Wesley Tanaka’s picture

Wesley Tanaka commented

It's probably cleaner to override the tinymce_theme theme function instead of editing tinymce.module.

Home | Treehouse

rfranquet’s picture

rfranquet commented

TinyMCE converts < b > to [b] and all other obsolete tags when BBCODE is enabled . When BBCODE is disabled, TinyMCE converts < b > tag to the new tag < strong > and all other obsolete tags.

ninetwenty’s picture

ninetwenty commented

Has anyone got this to work? I'm using Drupal 4.7 and TinyMCE 2.0.6.1 and it doesn't seem to make any difference as I still get invalid XHTML output with images.

quicksketch’s picture

quicksketch
he/him
commented

I'm looking at the exact same problem as ninetwenty. TinyMCE used to produce proper output for aligned images if you set "inline_styles" = true for tinyMCE. Unfortunately, this parameter has ceased to function in versions of tinyMCE past 2.0.2. There is a bug report currently open on the tinyMCE tracker at SourceForge. There doesn't seem to be much that we can do at this point.

Nathan Haug
creative graphic design        w: quicksketch.org
& software development       e: nate@quicksketch.org

quicksketch’s picture

quicksketch
he/him
commented

I wrote a plugin for tinyMCE for people that want absolutely XHTML strict output. This plugin converts TABLE, IMG, and BR attributes into proper inline styles during cleanup. When the content is loaded back into the editor, the styles are converted back to attributes so plugins like 'table' and 'advimage' can continue to edit these attributes.

I hope that many users find this plugin useful. It is also available at sourceForge http://sourceforge.net/tracker/?group_id=103281&atid=738747.

A small correction to my post above: "inline_styles" does nothing in the tinyMCE core, though some plugins still use this parameter.

Nathan Haug
creative graphic design        w: quicksketch.org
& software development       e: nate@quicksketch.org

rickvug’s picture

rickvug commented

I'm guessing this is the one at the top? What I am looking for more than validation is semantic output by default with no inline styles allowed at all. For example, when a user hits bold, the text is wrapped in a "strong" tag, not this: .

Any plugin/modification that will do that? I really want Tiny MCE to be pared down so that users can't mess up the code no matter what they do. As well, I think there are many others who feel the same way, so making a package or at least tutorial about this would be great. If I get a definitive answer I may just have to add it to the handbook. Thanks.

-------------------------------------------------------------------
Rick Vugteveen | Image X Media (work) | Blog (personal)

-------------------------------------------------------------------
Rick Vugteveen |rickvug.com @rickvug on Twitter

quicksketch’s picture

quicksketch
he/him
commented

I need to clarify my post. The plugin is available directly from http://sourceforge.net/tracker/index.php?func=detail&aid=1501217&group_i...

Nathan Haug
creative graphic design        w: quicksketch.org
& software development       e: nate@quicksketch.org

deddog13’s picture

deddog13 commented

Hello,

how do i get the xhtml_helper plugin to work? Have put in the plugins folder and have added this line "$plugins['xhtml_helper'] = array();" to plugin_reg.php.... but only really guesing... not sure what i'm supposed to see?

thanks in advance,

Lee.

geordie__’s picture

geordie__ commented

I've got the same problem.
I've inserted these rows:

$plugins['xhtml_helper'] = array();
$plugins['xhtml_helper']['theme_advanced_buttons1'] = array('helper');

in ../modules/tinymce/plugin_reg.php , but I don't notice anything...
Anyone to explain how to do?

susez’s picture

susez commented

I have just had this problem, and I see this is an old issue, but I didn't find an answere anywere. After some research I have found the (eeeeeasy) solution:

You only need the line:

$plugins['xhtml_helper'] = array();

and then enable that plugin in the tinymce profile. (obvious hu!)

Jesús Carrera - http://www.jesuscarrera.info

Dexpla’s picture

Dexpla commented

FCK Editor is the way to go, I use it all the time and never had a problem with it