FCKeditor not showing up / HTML-differences betweed FCKeditor and CKEditor

ℹ️ Support
1

I just installed phplist 3.3.1. It’s a complete new and default installation. I only inserted the MySQL-Data in config.php.

But unfortunately FCKeditor doesn’t work. When i created a new message, the windows, in which the editor normally appears is blank. Does anybody knows why?

Alternatively I can use the CKEditor, but there is the next problem. In my newsletter, I often user pictures, that are aligned right. In FCKeditor it looks like this:

<p><img src="https://discuss.phplist.org/uploads/phplist_site_logos/phplist_logo_discuss_opt.png" alt="" width="152" hspace="5" height="41" align="right" />Lorem ipsum dolor sit amet.</p>

Same created with CDEditor will be this:

<p><img alt="" src="https://discuss.phplist.org/uploads/phplist_site_logos/phplist_logo_discuss_opt.png" style="margin-left: 5px; margin-right: 5px; float: right; width: 152px; height: 41px;" />Lorem ipsum dolor sit amet</p>

In both editors it doesn’t look different, but the first HTML will be displayed correctly in Outlook 2010, the second not (the image does not appear on the right).

Does anybody have a solution?

2

@arada This seems to be a long-standing issue with ckeditor, just search for “ckeditor img attribute outlook” to find some discussions.

You can try telling ckeditor to use attributes instead of inline styles by creating a custom configuration file, see https://resources.phplist.com/plugin/ckeditor#custom_configuration and including this

CKEDITOR.editorConfig = function( config ) {
    config.allowedContent = {
        $1: {
            elements: CKEDITOR.dtd,
            attributes: true,
            styles: true,
            classes: true
        }
    };
    config.disallowedContent = 'img{width,height,border*,float}';
};

The idea is to tell ckeditor to not use width or height inline styles on an img element.

Alternatively you could try the TinyMCE editor.

3

Thank you, duncanc! With TinyMCE it works.

One last question, I couldn’t anwer myself: I want to use the TinyMCE-Plugin called “image tools” (for insert hspace to the image). Where can I insert that code for that (look here: https://www.tinymce.com/docs/plugins/imagetools/)?

4

@arada You need to create a custom build, see https://www.tinymce.com/download/custom-builds/ then install that on your web server. Then tell the plugin where TinyMCE is located, https://resources.phplist.com/plugin/tinymce#location_of_tinymce

5

That’ll help, thank you very much for that!

6

Hmm, I just downloaded it with all possible plugins, installed it, edited the location in PHPList-config and TinyMCE looks the same. So where can I activate that plugin called “image tools”?

7

Just found another solution and I found the configuration in the PHPlist config area. I did it like this with styles formats, so that I get hspace: