writing newsletters/emails with ckeditor

Feb 7, 2014 at 4:37 AM
Edited Feb 7, 2014 at 4:48 AM
Hi

When you set an image to align left via its properties CKeditor will add a float:left to that image.
That works great in websites but with a Newsletter module this produces HTML that doesn't perform well in email clients.
I cheched the different settings and didn't found anything that changes this behaviour.
On the CKEDITOR website I found this link http://docs.ckeditor.com/#!/api/CKEDITOR.filter.transformationsTools-method-alignmentToAttribute
indicating that it is possible to 'fix' this behaviour, but not out of the box.
Would it be possible to start implementing a "EMAIL CLIENT COMPATIBLE HTML" setting that does nothing more then execute some transformations.
Well, it probably isn't as simple as it sounds and maybe there are more interesting approaches. But I hope I managed to lay out the problem and hope some practical solutions can be found.

Here is a link that targets the same kind of questions: https://dev.ckeditor.com/ticket/5547
Maybe the major problem is indeed the image meaning the the http://ckeditor.com/addon/image2 add-on would be a solution (as suggested at the end of the ticket)

Rob
Coordinator
Feb 7, 2014 at 11:01 AM
With The Provider 2.00.09 you can load a custom js file to modify how the editor behaves. Here is what you need to do.
  1. Create a new js file (file name for example: 'custom.js')
  2. Add the following content
CKEDITOR.on('instanceReady', function (ev) {
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];

                        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 (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});
  1. upload that file to your portal home folder
  2. In the Editor Options select the file under "Custom JS File" (if you don't see any files then you need to add the js file extension as allowed file extension in the dnn host settings)
  3. Save the Settings and reload the Editor and you are done.
Feb 11, 2014 at 12:07 PM
Based on your feedback/suggestion we managed to indeed create solution. We did notice however that custom js didn't work at module-settings-level. We had to use portal-settings-level (we did not try page-settings-level yet). This is a pity.
We are hoping to improve the js file to change even more settings in order to produce flawless email html. We will share those changes once we made them.