I use CKeditor 4 for email and therefor I would like to use text alignment with the html align attribute instead of css.
default e.g: <p style="text-align:center">test</p>
What I need: <p align="center">test</p>
I know the align attribute is deprecated, but it's just more reliable in e-mails viewed in older versions of Outlook, and easier for the users who don't know anything about html/css.
The cleanest solution I found that is workable for me is making the following changes in config.js:
Not showing the alignment buttons anymore by removing
{ name: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
from config.toolbar_MyToolbar.Adding
config.disallowedContent = '*{text-align}';
Adding some extra paragraph formats and using these for alignment instead of the standard alignment buttons:
config.format_tags = 'left;center;right;justify;h1;h2;h3;h4'; config.format_left = { element: 'p', attributes: { 'align': 'left' } }; config.format_center = { element: 'p', attributes: { 'align': 'center' } }; config.format_right = { element: 'p', attributes: { 'align': 'right' } }; config.format_justify = { element: 'p', attributes: { 'align': 'justify' } }
(therefor I had to add the Format-plugin)
This works perfectly, but I prefer the use of the buttons, if possible, because they are more intuitive for the users...
Does anyone have a solution for a clean and easy switch from css text-align to the html align attribute?
Or if easier and possible, to link the standard align buttons to the new added paragraph styles that already do the trick.
Something in this direction that already detects when I click the standard center button:
`CKEDITOR.on('instanceReady', function (ev) {
// Create a new command with the desired exec function
var editor = ev.editor;
var overridecmd = new CKEDITOR.command(editor, {
exec: function(editor){
// Replace this with your desired save button code
//alert(editor.document.getBody().getHtml());
javascript:void('center');
}
});
// Replace the old save's exec function with the new one
ev.editor.commands.justifycenter.exec = overridecmd.exec;
});`
But I don't know how to call the function that is called when format_center under Paragraph Format is clicked. javascript:void('center');
is what I see on mouseover
I really appreciate your help!
Kind regards, Christophe
EUREKA: I found an easy solution without the need for the above:
`var styleCenter = new CKEDITOR.style({
element: 'p',
attributes: {
'align': 'center'
}
});
CKEDITOR.on('instanceReady', function (ev) {
// Create a new command with the desired exec function
var editor = ev.editor;
var overridecmd = new CKEDITOR.command(editor, {
exec: function(editor){
// Replace this with your desired save button code
editor.applyStyle(styleCenter);
}
});
// Replace the old save's exec function with the new one
ev.editor.commands.justifycenter.exec = overridecmd.exec;
});`
Or is there a better solution?