Richcombo breaks on HTML entities in HTML formatted values

[spuymore]

• configure an editor with latest strinsert addon from ​https://github.com/57u/custom-dropdown-ckeditor4/commit/32bb75a5fc5129722ddd32637e8639be2735cbb5 (​http://ckeditor.com/addon/strinsert is not up to date) using following settings:

  config.extraPlugins = 'strinsert';
  config.strinsert_strings = [{'name': 'test', 'value': 'html entities like <, &gt and & wont work'}];
  

• open the editor, select 'test' from the 'Insert' dropdown in the toolbar and you'll get a JavaScript error like:
  • Chrome:

    Uncaught TypeError: Cannot call method 'hasClass' of null ckeditor.js:746
    Uncaught TypeError: Cannot call method 'hasClass' of null ckeditor.js:746
    CKEDITOR.ui.listBlock.CKEDITOR.tools.createClass.proto.isMarked ckeditor.js:746
    CKEDITOR.ui.listBlock.CKEDITOR.tools.createClass.proto.toggle ckeditor.js:744
    (anonymous function) ckeditor.js:742
    (anonymous function) ckeditor.js:27
    CKEDITOR.tools.callFunction ckeditor.js:27
    onclick
    

  • IE:

    Error: Unable to get property 'hasClass' of undefined or null reference
    

Edit: Please see comment:5 for quick summary :)

[Jakub Ś]

This is a DUP of #10638.

Please use

{'name': 'test', 'value': 'html entities like <, > and & won\'t work'}

and insertText because you are not inserting HTML in this case.

[spuymore]

But that's exactly the point, I want to insert HTML, not text!

So please reopen considering I would want to insert HTML with HTML entities in it:

config.strinsert_strings = [{'name': 'test', 'value': '<div>html entities like &lt;, &gt and &amp; wont work</div>'}];

The above fails with given errors but HTML without entities works, e.g.:

config.strinsert_strings = [{'name': 'test', 'value': '<div>this html without entities inserts fine!</div>'}];

[Jakub Ś]

I want to insert HTML, not text!

Plugin name is kind of misleading.

You are right, when one wants to insert HTML with entities then dropdown breaks.

Problem can be reproduced in all browsers from CKEditor 3.0.

[Piotrek Koszuliński]

I assume that this is a similar problem to what we found recently in the #11865 and #11811. It's very hard to encode attribute when serializing some uncontrollable value to an HTML string. Therefore, we're not planning to work on this issue for now.

The second reason why we're not going to work on this is that there is a trivial workaround. Instead of passing HTML to the option's value, pass there a key to an object which will store those HTML strings.

[spuymore]

The second reason why we're not going to work on this is that there is a trivial workaround. Instead of passing HTML to the option's value, pass there a key to an object which will store those HTML strings.

Thanks, excellent idea, didn't think about that. I have just succesfully implemented a patch for the str_insert plugin using this workaround, will provide it to the owner.

[Jakub Ś]

Another approach is doing what stylescombo plugin does. In styles.js you just define tag names, classes styles etc. Next inside the plugin you create styles ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/stylescombo/plugin.js#L23-L59 and populate them into dropbox - ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/stylescombo/plugin.js#L79-L89

The only problem is that styles.js is an external file which gets loaded: ​https://github.com/ckeditor/ckeditor-dev/blob/master/core/style.js#L2022 and style definitions from that file are then processed when appropriate event is fired. You don’t need to fire any event. You can keep for example your HTML pieces (element name class etc.) in some ckeditor config option (if it is used on HTML directly it can be dynamic) and change them into styles once plugin is loaded.