Tag: ckeditor

Posted on

CKEditor: Use config.allowedContent/extraAllowedContent to stop tags being stripped

I was having an issue with certain tags, e.g. span and div, being stripped out of html by CKEditor. Whether or not I should be using these tags is another issue – in this particular situation it was useful to use span tags to give a class to snippets of text that would be styled in different ways, to indicate different types of text (printed, handwritten or engraved) on historical slides in CSlide.

It turns out that CKEditor (4.1 onwards) has the Advanced Content Filter (ACF), which is a highly configurable filter that allows only certain types of content to be entered into the editor, and removes any html tags that are not allowed by the configuration. The default behaviour (Automatic mode) results in all of the enabled editor features, e.g. styling buttons, formats, etc, adding their rules (i.e. the html associated with the feature) to the filtering rules to allow that type of content. The alternative to this is Custom mode, where the allowed content is defined in the config, using config.allowedContent – see the CKEditor guide on defining allowed content rules.

Turning off the ACF

I wouldn’t advise this (it is much better to configure the ACF), but if you really don’t want CKEditor to do any filtering, you can turn it off by adding the following line to config.js:

config.allowedContent = true;

extraAllowedContent

As well as fully defining the ACF rules using config.allowedContent, it is also possible to extend the current rules using config.extraAllowedContent, and this was the most straightforward solution to my issue. extraAllowedContent allows you to add rules to the current config, which is an easy way to extend, for example, the automatic mode configuration. In my case, I was able to allow span tags, and define a set of classes that these span tags would be allowed to have:

config.extraAllowedContent = 'span(engraved,printed,manuscript,slide_text,label_text)';

This setting means that any other class associated with span tags will be removed (though the span tag will remain). Using ‘span(*)’ allows span tags with any class.

Posted on

CKEditor: Custom format options

I wanted to just allow a single “Heading” paragraph format in CKEditor, rather than having multiple heading options. I found that it was possible to change the available options in editing “config.format_tags” in ckeditor/config.js. For example, the following would show just the paragraph (Normal) and h1 (Heading 1) format options:

config.format_tags = 'p;h1';

However, having “Heading 1” as the only heading option isn’t particularly satisfactory, so I wanted to rename it to something else. This requires defining a custom format type, as follows:

config.format_tags = 'p;Heading';
config.format_Heading = { element : 'h1', name: 'Heading' };

Each of the format_tags needs a corresponding format_(tagName) entry and the default ones are predefined (http://docs.ckeditor.com/source/plugin28.html#CKEDITOR-config-cfg-format_tags). Overwrite these defaults in the config.js file does not seem to work, so I had to define a new format type, ‘Heading’, using the h1 element and named ‘Heading’.