ckeditor how to allow for .insertHtml(“<customTag myAttr='value'”></customTag>")

问题

var currentDialog = CKEDITOR.dialog.getCurrent();
currentDialog._.editor.insertHtml("<customTag myAttr='var'></customTag>");

Throws an error, TypeError: Cannot read property 'isBlock' of undefined

If I try .insertHtml("<span>hello</span>") it works just fine.

How can I change ckeditor to allow me to specify my own custom html tags via .insertHtml()? I'd love to just change it to be something like <span class='custom'... or something like that, but I'm having to deal with legacy CMS articles. Using latest ckeditor. Thanks.

回答1:

1. You need to modify CKEDITOR.dtd object so editor will know this tag and correctly parse HTML and process DOM:

   CKEDITOR.dtd.customtag = { em:1 };        // List of tag names it can contain.
   CKEDITOR.dtd.$block.customtag = 1;        // Choose $block or $inline.
   CKEDITOR.dtd.body.customtag = 1;          // Body may contain customtag.
   

2. You need to allow for this tag and its styles/attrs/classes in Advanced Content Filter:

   editor.filter.allow( 'customtag[myattr]', 'myfeature' );
   

Unfortunately, due to some caching, in certain situations you cannot modify DTD object after CKEditor is loaded - you need to modify it when it is created. So to do that:

1. Clone the CKEditor repository or CKEditor presets repository.

2. Modify core/dtd.js code.

3. And build your minified package following instructions in README.md - the only requirements are Java (sorry - Google Closure Compiler :P) and Bash.

PS. That error should not be thrown when unknown element is inserted, so I reported http://dev.ckeditor.com/ticket/10339 and to solve this inconvenience http://dev.ckeditor.com/ticket/10340.

回答2:

I worked around this issue with a combination of createFromHtml() and insertElement()

CKEDITOR.replace('summary', { ... });

var editor = CKEDITOR.instances.summary; 
editor.on('key', function(ev) {
    if (ev.data.keyCode == 9) { // TAB
        var tabHtml = '<span style="white-space:pre">&#09;</span>';
        var tabElement = CKEDITOR.dom.element.createFromHtml(tabHtml, editor.document);
        editor.insertElement(tabElement);
    }
}

来源：https://stackoverflow.com/questions/16066556/ckeditor-how-to-allow-for-inserthtmlcustomtag-myattr-value-customtag