How to define allowed tags in CKEditor?
Sometimes users copy and paste text from different sources to CKEditor, but I want to restrict what tags they can copy to C开发者_JAVA百科KEditor.
I only need to use certain tags in CKEditor: The list tag, break tag, etc...
Can I define them & disable the other tags in CKEditor?
There are some settings you can use. You define these settings editing the config.js file in the ckeditor's root directory. For example, if you want to be radical like me, you could put:
config.forcePasteAsPlainText = true;
If you want to restrict only certain tags exactly like you said, I found the setting bellow:
config.removeFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd';
The last will be done only when user execute the "remove format" command. More information: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags
Considering all the time, I think that you already have found your answer, but others can be helped.
I just did this to make sure nobody could put an <input> tag in the editor. It could probably be extended to other tags:
CKEDITOR.on('instanceReady', function(ev)
{
var editor = ev.editor;
var dataProcessor = editor.dataProcessor;
var htmlFilter = dataProcessor && dataProcessor.htmlFilter;
htmlFilter.addRules(
{
elements :
{
input: function(element)
{
return false;
},
}
});
});
You can use the whitelist plugin to define in your configuration a list of elements and attributes that are allowed and deny anything else.
It's basically the same solution presented by Paul Tomblin but it should be easier to handle more elements instead of copy lots of code and instead of blacklist it uses a whitelist so anything that isn't allowed is removed.
To add my input, there is since 4.1 the Advanced Content Filter feature, which allows for very specific rules for allowed content (what tags and which styles/attributes/classes for them). I find it very powerful and very nice to configure.
Read more at http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter but here's a few examples from the page
config.allowedContent = true; // to allow all
// A rule accepting <p> and <h1> elements with optional "left" and "right" classes.
// Note: Both elements may contain these classes, not only <h1>.
config.allowedContent = "p h1(left,right)";
// Rules allowing:
// * <p> and <h1> elements with an optional "text-align" style,
// * <a> with a required "href" attribute,
// * <strong> and <em> elements,
// * <p> with an optional "tip" class (so <p> element may contain
// a "text-align" style and a "tip" class at the same time).
config.allowedContent = "p h1{text-align}; a[!href]; strong em; p(tip)";
I applied a limited selection of html tags directly to the paste operation, using the strip_tags method from phpjs.org.
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.on('paste', function(evt) {
evt.data['html'] = strip_tags(evt.data['html'],
'<i><em><b><strong><blockquote><p><br><div><ul><li><ol>' // allowed list
);
});
});
function strip_tags (input, allowed) {
// http://phpjs.org/functions/strip_tags (http://kevin.vanzonneveld.net)
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}
CKEDITOR.config.fullPage = false
Indicates whether the contents to be edited are being input as a full HTML page. A full page includes the <html>, <head>, and <body> elements. The final output will also reflect this setting, including the <body> contents only if this setting is disabled.
加载中,请稍侯......
精彩评论