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

styles drop down
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