Posted by langweer on December 30, 2007 at 10:12am
Every new day I am happy with my decision for Drupal. I have another two days to go before the new website will be launched. Yes, that will me my job tomorrow night :-)
Today I discover that TinyMCE uses align="right" in the mark up when I select "Alignment: right" in the function "insert/edit image". I want to do this with CSS (class="alignright"). I tried to find a way to do this on TinyMCE’s website but had no luck. And I did not find a solution here in the forum.
Can someone here tell me how to tell TinyMCE to use my classes instead of its alignments?
Best regards - andreas
Comments
Answer
I found an answer to my question: TinyMCE does not offer this. I found it in the support forum on its website. That uncool, but I can't change it.
Is there a possibility in Drupal like a function that does "replace every 'align="right"' with 'class="alignright"'?
Do you really need to ?
I'm a big fan of semantics, validation, standards and pure-css
but
replacing
style="align:right"withclass="alignright"is missing the point a bit!I know what it feels like to want to 'clean up' the code and remove all that horrid inline style that WYSIWYG gives you, but there is no point taking it too far.
If your wysiwyg editor has a button to produce a stylistic effect, and you press it, that effect is what gets applied to your element ... and not that class of effect.
I have seen several sites where accessability freaks have created a class for all sorts of normal and abnormal layout conditions, and duplicated and multiplied and complicated the code, spread across several files now, just to make a style effect that could have been done directly inline.
Anyway, that said ... if you really want to solve that task, the thing to look at is one of the 'filters' modules. I'm sure one there can be configured to do freetext substitutions on-the-fly. token.module or something.
.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/
.dan. is the New Zealand Drupal Developer working on Government Web Standards
I do not need, but I want
Hey Dan,
thanks for your suggestion.
I want to replace
align="right"withclass="alignright". That’s a little different from your example. Because I want to change a html tag/attribute into a class.The advantage: I can easily add margins etc. to the image depending to its position. And IE6/Win also understands what I want :-)
I am a fan of standards and semantic, too. But in this case I had other things in mind.
I figured out how to do this. I choose "Advanced Image" in the TinyMCE controls in administer - settings - TinyMCE (- Edit profile - Buttons and plugins). Then I changed the look of the new advanced image popup window by changing the file image.htm in modules/tinymce/tinymce/jscripts/tiny_mce/plugins/advimage. Ok, that is not the best solution because of the known update problem. But I want my users only to see the necessary fields, so all others had to go. :-)
With "Advanced image" I can add classes to the image. That’s what I wanted.
andreas
That'll work
Yeah, locating and tweaking the exact code that tinymce creates is the true solution ... just a bit scary ;-)
good going!
.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/
.dan. is the New Zealand Drupal Developer working on Government Web Standards
You can add things this way too
If you just want to add css-stuff based on if the user has aligned the image left/right you can use
a selector like this in css:
[note: css2 which means "modern browsers"]
img[align="left"] {
margin: 7px 7px 7px 0;
}
img[align="right"] {
margin: 7px 0 7px 7px;
}
This is a good illustration
This is a good illustration of why it would be useful to apply classes to images that are aligned right/left. I always need to apply right padding to left aligned images and left padding to right aligned images. That's easy when there's a class or id to select.
img.leftalign {margin 7px 7px 7px 0;
}
With CSS2 selectors you can select by attributes and values. In Pollydor's example above, we're selecting an img tag with an attribute of "align", having a value "left".
In the more recent versions tinymce and ckeditor,
align="left"has been replaced with an inline style. It's still possible to select this with a slightly different selector:img[style~="left;"] {margin:7px 7px 7px 0;
}
For more information, look at Attribute Selectors on http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/
Looks like I spoke too soon.
Looks like I spoke too soon. While this works OK in FF and Chrome, it does not work in IE! No surprise there I suppose. I think I'll have to find some way of applying a class to images that have align="right" or style="float: right;". I think I can do that by creating a custom filter.
I found that the jquery
I found that the jquery method outlined here worked a treat.
http://groups.google.com/group/pixie-cms/browse_thread/thread/d806ae110d...
tinyMCE issue
this is my init function
tinyMCE.init({
mode : "exact",
elements : "facilityCommentId",
theme : "simple"
});
this is how i set value to my textarea id
tinyMCE.execCommand('mceRemoveControl',false,'facilityCommentId');
document.getElementById("facilityCommentId").value=document.getElementById("facilityCommentId1").innerHTML;
tinyMCE.execCommand('mceAddControl',false,'facilityCommentId');
tinyMCE.mode=true;
the problem is the text is with the tags as its not formatted while applying as above..
checking the c..