CKEditor 4
Sat, 01/09/2010 - 00:08
#1
bccarlso
bccarlso's picture
Joined: 09/01/2010
Posts: 3

Add a classname to an image instead of align="right"?

Is it possible to have CKEditor add a class to an image instead of using the HTML align="right"? I want to give right-aligned images a left margin and left-aligned images a right margin, but don't know how to achieve this without a unique class name given to each image. And I don't want to require my client to put in a custom class on each image, but alignment is intuitive enough for them.
Top
Sat, 01/09/2010 - 01:42
yavin
yavin's picture
Joined: 23/12/2009
Posts: 65

Re: Add a classname to an image instead of align="right&quo

I would recommend using the styles drop down. That way you can just add the image and then select it, having the class names selectable from the styles drop down. That is the most intuitive means I can think of right now.

Top
Sat, 01/09/2010 - 01:44
bccarlso
bccarlso's picture
Joined: 09/01/2010
Posts: 3

Re: Add a classname to an image instead of align="right&quo

Thanks yavin, that makes sense, but it would add an additional step or two (click image, select style) for the user, correct? I may have to go that route if I can't find an automatic solution. Seems like it would be possible to put class="left" or class="right" depending on alignment.
Top
Sat, 01/09/2010 - 01:47
yavin
yavin's picture
Joined: 23/12/2009
Posts: 65

Re: Add a classname to an image instead of align="right&quo

I guess if you are willing to go out of the CKEditor box, you could use jQuery. If you import a header file that includes jQuery and a selector, you could potentially use something like:
$(document).ready(function()
{
     $("img[align]").each(function(i)
     {
              var align = $(this).attr("align");
              if(align == "right")
                        $(this).addClass("rightAlign");
              else if(align == "left")
                        $(this).addClass("leftAlign");
     });
});
Top
Sat, 01/09/2010 - 01:54
bccarlso
bccarlso's picture
Joined: 09/01/2010
Posts: 3

Re: Add a classname to an image instead of align="right&quo

Hrm yeah that would make sense and probably be a sensible solution, it had skipped my mind. Thanks for the suggestion!
Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check