Hello,
I'm in the process of trying to figure out how to create a plugin that will allow me to alter the standard markup of images. ckeditor uses "float" to align images to text, the problem with that is that email clients such as outlook do no recognize this any longer, so instead I need to use the "align" property such as align = "left" and I'm trying to figure out an easy way of doing this. My idea was to create a plugin that I could use to apply to the ckeditor that I use to create my email content.
I found this piece of code that looks as though it will do what I want:
CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
$: function (element) {
// Output dimensions of images as width and height
if (element.name == 'img') {
var style = element.attributes.style;
if (style) {
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
var height = match && match[1];
// Get the align from the style
var match = /(?:^|\s)float\s*:\s*(left|right)/i.exec(style),
align = match && match[1];
if (width) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
element.attributes.width = width;
}
if (height) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
element.attributes.height = height;
}
if (align) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)float\s*:\s*(left|right);?/i, '');
element.attributes.align = align;
}
}
}
if (!element.attributes.style)
delete element.attributes.style;
return element;
}
}
});
});
Although I am pretty uncertain as to how to apply this to my editor.
I got as far as creating a custom module which is able to call the 'plugin.js' although i'm not certain if I have done it correctly.
<?php
function ckeditor_floatalign_ckeditor_plugin()
{
return Array (
'ckeditor_tablewidths' => Array(
'name' => 'floatalign',
'desc' => t( 'CKEditor replace float with align' ),
'path' => drupal_get_path('module', 'my_module') . '/my_plugin',
)
);
}
I've managed to get this far with my code, although I will admit, i'm not really sure what i'm doing, the pluging shows up as an option in my list of plugin options, and i'm able to select it, but when I go to create the content, the "body" window opens and ckeditor begins to open but I dont' see any of the normal buttons, just a frame and the editor window. No errors show up in my browser console. Here is my plugin.js code so far.
(function($)
{
CKEDITOR.plugins.add('floatalign',{
init:function(e){},
requires:[]
CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
$: function (element) {
// Output dimensions of images as width and height
if (element.name == 'img') {
var style = element.attributes.style;
if (style) {
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
width = match && match[1];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
var height = match && match[1];
// Get the align from the style
var match = /(?:^|\s)float\s*:\s*(left|right)/i.exec(style),
align = match && match[1];
if (width) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
element.attributes.width = width;
}
if (height) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
element.attributes.height = height;
}
if (align) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)float\s*:\s*(left|right);?/i, '');
element.attributes.align = align;
}
}
}
if (!element.attributes.style)
delete element.attributes.style;
return element;
}
}
});
});
});
})(jQuery);
Thanks for any help in the right direction, I'm attempting to learn how to do this, but it's a bit out of my rehlm of knowledge. of course any other ideas or options are appreciated. perhaps there is an easier way of doing this, although my thought with creating a plugin, is the ability to turn it on and off for various content types.