Quantcast
Channel: Active questions tagged email - Stack Overflow
Viewing all articles
Browse latest Browse all 29748

Switching to HTML align attribute instead of default CSS text-align for emails

$
0
0

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?


Viewing all articles
Browse latest Browse all 29748

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>