config.allowedContent = true inserts blank paragraphs after any custom tag

[Jay]

I need to allow a large number of custom tags in my code that are not html.

I have config.allowedContent = true in Config.js

In the source view, I add a custom tag as follows:

<cf_protip>some text here</cf_protip>

If I switch to the visual editor and then back to the source view, I get the following:

<cf_protip>some text here</cf_protip> <p>&nbsp;</p>

Further, each time I toggle the source view it adds more and more <p>&nbsp;</p>. The growth of these is exponential.

<cf_protip>some text here</cf_protip> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>

This oddness makes it completely unusable with my custom tags.

Steps to reproduce

1. set config.allowedContent = true in Config.js
2. add any non-standard html tag <mytag>xxxx</mytag>
3. toggle the source view a few times

Expected result

Ignore my custom tag code with no other additions.

Actual result

watch the whitespace grow!

Other details (browser, OS, CKEditor version, installed plugins)

Chrome, Windows 7, standard CKEditor downloaded 2/19/2016

[Jakub Ś]

CKEditor doesn't support custom elements by default. In order to make them work, dtd needs to be modified (source code for dtd), ACF needs to be extended and new editor needs to be built. Please see: ​https://stackoverflow.com/questions/16066556/ckeditor-how-to-allow-for-inserthtmlcustomtag-myattr-value-customtag/16068708#16068708

Direct Source Code modification is required for block-level tags. For inline tags dtd can be modified before first editor initialization. Please see below for code example.

With the above approach extra paragraphs will not be added.

---

Please note however that custom tags are not supported in the editor and although extending DTD will work, there might be some quirks related to the usage of these tags.

---

If you want to use inline custom tags you can try putting below before creating editor instance.

//CKEDITOR.config.allowedContent  = true; //Starting from 4.1
CKEDITOR.dtd.customtag = { '#' : 1, 'span' : 1 }; // Only text and span content is allowed
CKEDITOR.dtd.$inline.customtag = 1;// Custom tag is inline
CKEDITOR.dtd.body.customtag = 1; // Body may contain customtag.

CKEDITOR.replace('editor_name', {
extraAllowedContent : 'customtag(*)[*]{*}';
});

NOTE: I recommend using ACF as it is better to configure ACF than disabling it. If you plan to extend ACF then you can't use this command CKEDITOR.config.allowedContent = true