Hello,
I need some help, I'm trying to create two buttons for left and right align images (wrap text), the same as align option from image dialog. Basically it should add "float:left" or "float:right" to image style.
This buttons are different from existing align left, center, right, justify witch in fact modifies "text-align" property of the paragraph (without wrap text).
I keep searching for some time so I managed to understand haw to make a simple plugin but I didn't make it to set the style property.
This is my code so far, I made the changes to load the plugin and to show the button, it works with a simple "alet('something');" but I don't know to make it set the "float:left" property:
It would be good also that the buttons to be enabled only when an image is selected.
I think this buttons would be useful for a lot of people because aligning images in editor is not yet handy, especially for people who have no idea about HTML and CSS.
Thank you
I need some help, I'm trying to create two buttons for left and right align images (wrap text), the same as align option from image dialog. Basically it should add "float:left" or "float:right" to image style.
This buttons are different from existing align left, center, right, justify witch in fact modifies "text-align" property of the paragraph (without wrap text).
I keep searching for some time so I managed to understand haw to make a simple plugin but I didn't make it to set the style property.
This is my code so far, I made the changes to load the plugin and to show the button, it works with a simple "alet('something');" but I don't know to make it set the "float:left" property:
(function(){ var a= { exec:function(editor){ // Apply style. var style = new CKEDITOR.style( { element : 'img', style : 'float:left' } ); style.type = CKEDITOR.STYLE_INLINE; style.apply( editor.document ); } }, b='floatleft'; CKEDITOR.plugins.add(b,{ init:function(editor){ editor.addCommand(b,a); editor.ui.addButton('floatleft',{ label:'Align Left', icon: this.path + 'align_left.png', command:b }); } }); })();
It would be good also that the buttons to be enabled only when an image is selected.
I think this buttons would be useful for a lot of people because aligning images in editor is not yet handy, especially for people who have no idea about HTML and CSS.
Thank you
Re: Align image button
You might want to look into writing this plugin. Take a look at the "justify" plugin and I'm sure a lot of the code could be cloned to do exactly what you want. You'd remove the "center" and "justify" styles and you might want to add the check to make sure the selected element is an image but I'm sure it's not too bad
This is already possible via the image properties pop up. There's a drop-down to align the image left or right which actually does float it (maybe you can borrow some code form there too haha)
Good luck!