CKEditor 4.1 Released

Posted by Anna on Releases

We are happy to announce the final release of CKEditor 4.1 with its groundbreaking new feature, Advanced Content Filter. After a successful stabilization phase following the release of CKEditor 4.1 RC we are really excited to publish this latest major release with a plethora of new features and a few fixes.

Advanced Content Filter (ACF)

The main feature that CKEditor 4.1 introduces is configurable input data filtering that we called Advanced Content Filter (ACF). ACF limits and adapts the data that is incoming to your editor to match the editor configuration that you have decided to use. What does it mean exactly? Let us first explain the two modes available in ACF.

Automatic ACF Mode

In automatic mode the filter is configured by editor features that you enable in your configuration — i.e. plugins, toolbar buttons, etc. Whatever content these features can produce and edit will be added as "allowed". Everything else will be stripped from the code by the editor as disallowed content.

The automatic mode is on when the CKEDITOR.config.allowedContent option is not set in your editor configuration. This is the default setting which means that from now on by default all CKEditor contents will be filtered.

Custom ACF Mode

The filter can also work the other way round. You can manually configure which HTML elements, attributes, styles, and classes are allowed and the editor will adjust the features that are active and available to your users. This means that the user interface will only contain these toolbar buttons and dialog window tabs or even individual fields that support the content you explicitly allowed.

You can manually configure the allowed content by defining the CKEDITOR.config.allowedContent option. For your convenience, Allowed Content Rules can be set in two formats: the compact string format and as object literals.

Content Transformations

ACF also includes another powerful feature: It can convert all forms of one feature to a chosen, preferred one. How does it work? If, for example, you want to allow bold formatting in your editor instance and additionally, your preferred form that is added to the filter definition is the <b> element, the editor will accept all other forms of bold text (using <strong> or inline styles, for example) and convert them into <b> elements. This will save you the need to define all such synonyms in the allowed content configuration and at the same time will unify your data to one preferred form.

ACF Documentation

We are very excited to offer all these features to you and to bring the editing experience to the whole new level. In order to make your introduction into CKEditor 4.1 smoother, we have created a few resources that can help you understand and fully appreciate the possibilities that Advanced Content Filtering can give you. Check the following for more information:

  • The blog post introducing CKEditor 4.1 Release Candidate with a nice introduction into ACF, explaining why content filtering is exactly the thing you have been waiting for.
  • The Advanced Content Filter chapter of the Developer's Guide.
  • The datafiltering.html sample available in the samples folder of each CKEditor installation package.
  • The data filtering demo on our website.

What You Need To Do

Automatic content filtering will be turned on by default, so you must be aware that from now on, all editor content will be stripped of any elements that do not comply with your editor configuration and the features that you enabled. This is also the case with content added to your website or database in the past that you want to edit now by using the latest editor version. You should thus carefully examine your editor configuration and check whether all the features that you want to use are enabled. Once you are done with it, you can be sure that any rogue elements that might destroy your website layout or cause other undesired effects will be removed by the editor without any further effort on your part!

Furthermore, if you created any custom CKEditor plugins, you will need to modify them to comply with ACF. This is a one-time exercise, too, and we have created a guide that will explain how to do this.

Last but not least, remember that you can turn ACF off at any moment by setting CKEDITOR.config.allowedContent to true. We do, however, hope that you will treat this as a last resort solution as we would not like you to skip a truly innovative feature that we are really proud of!

Other Changes

As explained in the CKEditor 4.1 RC post, this version brings a few other features and fixes, most notably:

Check out the What's New? page for the full list of changes.

Feedback Wanted!

We are really enthusiastic about the new CKEditor version and in particular, about the Advanced Content Filter feature. The 4.1 Release Candidate brought us a lot of positive feedback (and some critique, too!), so we will be happy to hear from you and thankful for any suggestions that will help us improve this feature and tailor it to your expectations.

Download

Download CKEditor 4.1 now!

License

CKEditor is available under Open Source and Commercial licenses. Full details can be found on our license page.

Reporting Issues

Please use the CKEditor Development site to report issues and suggestions through tickets.

Support

Community support is available through our forums. Visit the support page for additional options.

Enter the discussion and post your comment

Post a comment
  1. The content of this field is kept private and will not be shown publicly.
  1. M. Bardelmeijer's picture

    M. Bardelmeijer

    Reply

    Thx for this, i was waiting on the source editing for inline, but i will definitely check the ACF out.

  2. OK, how do you turn it off!?!?

    I just gotta say, this is SUCH a bad idea.  I mean, it's an awesome feature, but to make it the default?  That's just CRAZY!!!

    For example, I don't have the image "plugin" enabled in my toolbar, because I don't want non-advanced users adding images to content; but advanced users know they can go to the Source, and add their own image tags.

    But once I dropped this version in place, I load up a previously saved document, and all the image tags were automatically stripped out, and our app "saves as it goes" meaning that newly stripped content is what is now saved in my database.  Yes, this was on my dev environment, so no big loss; but the potential for chaos is pretty huge.  What would have happen had I not been familiar with the way the saved document had previously looked?  An IT person might have just dropped in this new version, load up an existing doc, think it looks "right", then deploy to production.

    Please tell me you enabled a way to turn this off completely?  So far, I've not found such a setting...

    • OK found it!  

      If you want to disable Advanced Content Filter, set CKEDITOR.config.allowedContent to `true`. All available editor features will be activated and input data will not be filtered.

      Panic, decreasing...

      • jduty's picture

        jduty

        Reply

        Thanks so much, I was just about to look into turining off this "Feature". You just saved muy time I really don't have to spend on this mess.

        • I don't really get it... each piece of text that we write on ACF and CKEditor 4.1 contains a note on how to turn content filtering off. Like in the text above which you are adding comments to:

          Last but not least, remember that you can turn ACF off at any moment by setting CKEDITOR.config.allowedContent to true.

           One thing is to blame us for a feature you don't like -- fair enough, we really take all feedback seriously, positive or not -- but skipping relevant fragments of the documentation that is available, upgrading, and then complaining about the lack of information sounds a bit unwise to me. Just my 2 cents, though.

    • We're very sorry for the inconvenience and we know that migration to ACF needs special attention - that's why we released 4.1RC, published blog post about plugins integration and precisely described the situation in this blog post. Unfortunately, this is a situation that we couldn't avoid.

      • You don't owe me an apology!  Sorry, I was in panic mode!  I appreciate the work you guys have done on such a fine product!

        When you say the situation couldn't be avoided though...

        Couldn't you have set the default as off for this first release?  Personally, I believe that would have been a much wiser strategy.  Being on the other side of the fence as an integrator/user of CKEditor, when I use an open source tool I don't use RCs.  If I evalutae a new version for my solution, I always download the the latest "release" version.  Do my testing, and then move through the development lifecycle.

        As I tried to outline in my original post, the problem with this stort of change, is that it can very easily slip past a first "check"; and if the project doesn't have much in the way of QA resources, it's conceivable that it could even slip into production, and cause a great deal of data loss/havoc with user data.

        I think implementing something like an ACF icon in the toolbar/footerbar and when it's on or off show status accordingly; would have been a much better initial strategy.   It would have acted as a visual touchstone for developers who just drop-in new versions (such as an icon showing up with the classic "no" circle around it).

        Then choose a milestone version like 4.5 to go "default on".

         

         

        • Hehe :) We were considering deferring enabling ACF. I explained in another comment why we decided not to do this. It just wouldn't help - we would only postpone the "boom! effect".

          Anyway, it was a tough decision. Luckily, it's too late to change it. And, in fact, I was anticipating more shocked developers on our forum, but it's quite calm there and on Stack Overflow. Perhaps that's because most developers do not update libraries like CKEditor, so old projects are not affected. Only new will be, but then there's more time to notice that something is wrong.

          • Oh, just give it time...

            I've spent the past three weeks trying to build a case for Cisco to STOP using a "one-off" approach of custom code and version-contol merging; to instead use the customization framework of Plugins and Skins, and a "dropin" approach to implementing new CKEditor library versions.

            After trying to submit a pull request that would have enabled more customization via the "skins" framework, only to be told that I should just manage my own fork to see the change I wanted; I guess I now understand why we've been using the "custom version" approach all along.

            Fair enough.

            • We can't include every feature that users ask for, even if they prepare a patch (which doesn't mean the end of work - we still need to write tests and maintain them). Editor is already pretty big (very often hear: "WAT? 400kb JS?!") and it's not easy to maintain and test too, because it already has hundreds options. Therefore if a feature is unlikely to be popular (and your definitely won't be) we sometimes need to reject it for the greater good.

              In short - CKEditor is open source project which you can fork. It's not trivial to maintain a fork, I know that. But it also isn't easy for us to maintain a huge code base.

              • Oh, I definately understand that.  I've been at this longer than you've been alive. ;-)

                But anyway, I'm done.  

                I do appreciate the work!

                Thanks!

                • I've been at this longer than you've been alive. ;-)

                  :D:D:D

          • Perhaps a lot of those shocked developers dropped your product and moved to something else. I have been a fan of your software for a long time, but I thought I would have to drop it also until I discovered that ACF was actually a 'feature' that could be turned off, rather than a catastrophic bug.

            While content filtering is a reasonable enough idea, making it the default option was reckless and unprofessional.

            Some developers had to upgrade CKEditor for old projects, because the old FCKEditor was not compatible with IE10.

            • Isn't it unprofessional to ugrade software without reading changelogs and testing too? It totaly is. I bet you won't upgrade Windows 98 (FCKEditor) to Windows 7 (CKE4) on all PCs in your company without testing first if all important programs work. It would be reckless and unprofessional.

              Staying in one place because of being afraid of changing anything is irrational. It is impossible to achieve anything this way. I explained in other post why have we made a decision to enable ACF by default. It was the only reasonable solution if we wanted to make a step forward.

              And of course we were aware of importance of this change, so we produced whole bunch of blog posts, guides, we released 4.1 RC and so on. We couldn't do much more to inform our users better. And in fact we had very little negative comments, so our actions worked.

  3. Mircea's picture

    Mircea

    Reply

    So happy to find this editor. Easy to install and great user experience too when using it. 

    But i have a single question. Is it possible that in a next release can you guys make as default that when you want to select a text and use H1, h2, etc, you can use shortcut keys like ctrl+1 for h1, ctrl+2 for h2, etc.?

  4. nfrandeboeuf's picture

    nfrandeboeuf

    Reply

    Could you please allow to choose the 4.0.3 version in the CKEDITOR builder instead of the 4.1 ?

    • At this moment there is no such option, but thank you for your suggestion.

      Am I correct that you would like to download 4.0.3 just because of ACF? Note that to disable it completely, you just need to set config.allowedContent to true
      Is there any other reason why you want to use the older version?

      There will be no further bugfixing releases for 4.0.x so it's better  to go ahead with the latest stable version.

      Alternatively, you may download CKEditor 4.0.3 in one of predefined packages on the download site.

      Last but not least, you can download source files tagged with 4.0.3 and run dev/builder/build.sh to create a package customized to your needs: https://github.com/ckeditor/ckeditor-dev/archive/4.0.3.zip
      (build.sh can be run on Windows as well, just install msysgit with "Git Bash Here" option)

       

      • nfrandeboeuf's picture

        nfrandeboeuf

        Reply

        Yes, you are correct. If I set config.allowedContent to true, everything will work as in the 4.0.x versions, including all the plugins which might have not been updated to work with 4.1 ?

        Thank you very much for those tips !

        • Exaclty, set config.allowedContent to true and the problem will be gone ;-)

          No need to stay with the old version, with this single configuration change you will be able to do both: still enter anything you need in source mode and upgrade to the most recent versions of CKEditor.

  5. Alex1220's picture

    Alex1220

    Reply

    Hi, are you going to release CKEditor 4 for ASP.NET?

    • Yes, CKEditor for ASP.NET is coming, though there is no ETA on this at the moment, sorry.

      In the meantime you can try combining the 3.6.4 version of the CKEditor control with CKEditor 4 files, some users have reported that it works OK (no guarantee, though).

      • Joseph A's picture

        Joseph A

        Reply

        Is there any ETA on the 4.2 version of ASP.NET yet?

        • I am too looking for the new ASP.Net version of CKEditor. Please can I know about the time?

  6. Is there a list somewhere of all the tags enabled by default in ACF?

    • This list depends on the editor configuration (loaded plugins and toolbar layout), so there's no one static list. But once editor loaded you can check the editor.filter.allowedContent object which contains all registered rules.

      • jduty's picture

        jduty

        Reply

        Really? We have to poke around in the debugger to get the allowed tags... Ok, I  guess thinking about people actually developing plugins was an after thought? We have over a dozen custom plugins, lets make more work for developers. And before someone barks about it being free, our company actually pays, but if this is the amount of work we are going to get with future upgrades I don't think we'll continue with this product.  Upgrade to fix issues just to get a slew of new issues? Yeah...

        • Ok... So you would like a software that does not change with time. Which new major version is fully compatible with previous one. Interesting. If the software world would follow this requirement, then we would be still using Windows 98, or wait... DOS.

          Moreover, I really don't get your point. You need to switch one config option to disable the whole new feature. Is this really so big problem?

        • Unhappy's picture

          Unhappy

          Reply

          Really think this was an idiotic idea, have been trying whole morning and still doesn't work. I will be switching to something else, as so many others not bothering to comment, already have been doing.

  7. madhuvu's picture

    madhuvu

    Reply

    how to send decorated text from ckeditor to mail or outlook subject part

     

    • This is just a guess, but I think internet email protocol doesn't allow color in titles. You can change title colors in some email apps by defining certain conditions (unread emails, emails from specific people, etc.) but as far as I know those are merely conditions, not incoming code making those changes. In other words, you can control what you send, but you can't control what the recipient will see. 

  8. hyipcore.com's picture

    hyipcore.com

    Reply

    Hi team,

    Can I know why the source editor is not available for inline editor?

    Inline editor is so sleek and awesome only problem is it doesn't have source editor

     

  9. RobinB's picture

    RobinB

    Reply

    Hi CKEditor Team!

    I have tried to implement the code to disable ACF, but it appears to make no difference.  My CKEditor.config.js file is as below:

    //

    /*
    Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
    For licensing, see LICENSE.html or http://ckeditor.com/license
    */

    /**
     * Documentation:
     * http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
     */
    CKEDITOR.config.allowedContent = true;
    CKEDITOR.editorConfig = function(config) {

        // The minimum editor width, in pixels, when resizing it with the resize handle.
        config.resize_minWidth = 450;

        // Protect PHP code tags (<?...?>) so CKEditor will not break them when
        // switching from Source to WYSIWYG.
        config.protectedSource.push(/<\?[\s\S]*?\?>/g);

        // Define toolbars, you can remove or add buttons.
        // List of all buttons is here: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar_Full

        // WordPress basic toolbar
        config.toolbar_WordpressBasic = [
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
            { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
            { name: 'links', items: [ 'Link', 'Unlink' ] },
            { name: 'insert', items: [ 'Image', 'SpecialChar' ] }
        ];

        // The equivalent of "WordpressFull" toolbar, defined in a way that makes adding buttons from plugins easier.
        config.toolbarGroups = [
            { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
            { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
            { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
            // { name: 'forms' },
            '/',
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
            { name: 'links' },
            { name: 'insert' },
            { name: 'wordpress' },
            '/',
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'styles' },
            { name: 'colors' },
            { name: 'tools' },
            { name: 'about' }
        ];

        // Remove buttons in "WordpressFull" toolbar
        config.WordpressFull_removeButtons = 'Save,NewPage,Preview,Print,Templates,CreateDiv,PageBreak,Subscript,Superscript,Styles';

        //IE: remove border of image when is as a link
        config.extraCss = "a img { border: 0px\\9; }";

        // mediaembed plugin
        // config.extraPlugins += (config.extraPlugins ? ',mediaembed' : 'mediaembed' );
        // CKEDITOR.plugins.addExternal('mediaembed', ckeditorSettings.pluginPath + 'plugins/mediaembed/');
    };

    //

    Have I added the instruction correctly?

    Many thanks!