27
  • Sometimes users copy and paste text from different sources to CKEditor, but I want to restrict what tags they can copy to CKEditor.

  • 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?

1

6 Answers 6

24

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.

1
7

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;
                        },
                    }
                });
            });
1
6

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.

2
  • The nice part about providing the plugin as open source should be that you can improve it, or even pay someone to do what you need. Even if the user drags&drop something, the output will remain cleaned up, so it's only a partial bug and we could say that the problem is that CKEditor doesn't hooks on drag&drop as it does with pasting.
    – AlfonsoML
    Sep 20, 2012 at 14:18
  • Yes, I think I will use it anyway, thank you. As for fixing it, it doesn't seem easy seeing this ckeditor bug was closed at "wontfix": dev.ckeditor.com/ticket/5473 .
    – Damien
    Sep 21, 2012 at 7:50
6

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)";
3

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 : '';
   });
}
3
  • 1
    Is that regular expression parsing of HTML? Jan 23, 2013 at 15:14
  • Tee hee! OMG! Could it be? Sins on earth. Actually, it's stripping of HTML, not parsing, which is one purpose for which regex is thankfully well suited.
    – Kato
    Jan 23, 2013 at 15:59
  • for ckeditor 4 replace evt.data['html'] with event.data.dataValue
    – user570605
    May 5, 2013 at 22:36
2
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.