Jump to content
eelkenet

CKEditor crashes with these (basic) settings

Recommended Posts

So, this is a weird one. I initially thought this was a "CKEditor inside of Repeater Matrix"-problem, but for some reason a certain set of settings makes the CKEditor crash upon loading. 
I've tried on multiple systems, multiple browsers, and both on 3.0.123 (master) and the latest 3.0.142-beta.

I'm probably making a simple mistake here, but couldn't figure it out. I've worked around the issue for now, but leaving this here for other to take a look at. 
To replicate: Import the following field, add it to a page, and try to edit.

{
    "simple_body": {
        "id": 224,
        "name": "simple_body",
        "label": "Rich text with limited options",
        "flags": 0,
        "type": "FieldtypeTextareaLanguage",
        "inputfieldClass": "InputfieldCKEditor",
        "contentType": 1,
        "htmlOptions": [
            2
        ],
        "minlength": 0,
        "maxlength": 0,
        "showCount": 0,
        "rows": 10,
        "toolbar": "NumberedList, BulletedList, PWLink, Unlink, SpecialChar, Sourcedialog",
        "inlineMode": 0,
        "useACF": 1,
        "usePurifier": 1,
        "toggles": [
            2,
            4
        ],
        "formatTags": "p;ul;li;a",
        "extraPlugins": [
            "pwlink",
            "sourcedialog"
        ],
        "removePlugins": "image,magicline",
        "langBlankInherit": 0,
        "collapsed": 0,
        "textformatters": [
            "TextformatterEntities"
        ],
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "themeColor": "",
        "columnWidth": 100,
        "required": "",
        "requiredAttr": "",
        "requiredIf": "",
        "imageFields": "",
        "extraAllowedContent": "",
        "contentsCss": "",
        "contentsInlineCss": "",
        "stylesSet": "",
        "customOptions": "",
        "plugin_sourcedialog": ""
    }
}

 

Share this post


Link to post
Share on other sites
12 hours ago, eelkenet said:

"formatTags": "p;ul;li;a",

I can see a few issues, mostly relating to your formatTags setting:

1. The Format plugin is for block-level elements and the <a> element you have included is not block-level.

2. Normally list formatting is applied with the dedicated <ul> and <li> buttons and not via the Format dropdown.

3. You are configuring format tags but you haven't included the Format dropdown in the toolbar, so the format tag options aren't going to be available the user.

4. If you specify format tags beyond those configured by default in CKEditor (p;h1;h2;h3;h4;h5;h6;pre;address;div) then you have to configure corresponding "format_(tagName)" settings. This is the cause of the JS error. From the documentation:

Quote

A list of semicolon-separated style names (by default: tags) representing the style definition for each entry to be displayed in the Format drop-down list in the toolbar. Each entry must have a corresponding configuration in a setting named 'format_(tagName)'. For example, the 'p' entry has its definition taken from config.format_p.

5. Usually you don't want TextformatterEntities applied to a field that is going to contain HTML.

If what you are trying to do is remove the heading options from the Format dropdown then you can set Format Tags to "p" only and the NumberedList, BulletedList and PWLink toolbar settings will allow those corresponding tags also.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
9 hours ago, Robin S said:

If you specify format tags beyond those configured by default in CKEditor (p;h1;h2;h3;h4;h5;h6;pre;address;div) then you have to configure corresponding "format_(tagName)" settings. This is the cause of the JS error. From the documentation:

Quote

A list of semicolon-separated style names (by default: tags) representing the style definition for each entry to be displayed in the Format drop-down list in the toolbar. Each entry must have a corresponding configuration in a setting named 'format_(tagName)'. For example, the 'p' entry has its definition taken from config.format_p.

Thank you once again @Robin S, that is very helpful indeed. 

The other settings were mostly the result of me fiddling around trying to get the field back to working 👨‍💻💣⁉️☠️ 
I think it would be very helpful if this was clearly explained in the formatText's notes, as it is easy to overlook. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...