CKEditor, override and adding features

  • Hi all,

    For one of my client, it was needed to have predefine style in the wysiwyg editor (the paragraph format)

    alt text

    The goal was to avoid duplicate data and I didn't want to change core files.

    As the docs of the CKEDITOR mentionne it:!/guide/dev_configuration-section-using-the-config.js-file

    Using a custom configuration file is another recommended method of setting CKEditor configuration. Instead of using the default config.js file, you can create a copy of that file anywhere in your website and simply point the editor instances to load it. The advantage of this approach is that in this way you can avoid changing the original file, which makes it easier to upgrade CKEditor later by simply overwriting all files.
    Suppose you copied the config.js file to a folder named custom in the root of your website. You also renamed the file to ckeditor_config.js. At that point it is enough to only set the customConfig configuration option when creating the editor instances to use the customized settings defined in the file.

    So I duplicate the file config.js, available under .../Themes/Adminlte/assets/js/vendor/ckeditor/config.js and I put it directly in the public directory with the name my_config.js

    Thank to the CKEDITOR api, I only change/add a few lines,

    The format_tags with my new tags :

    config.format_tags = 'p;h1;h2;h3;h4;pre;newClass';

    And below, the instruction for the newClass:

    config.format_newClass = {name : 'New class format', element : 'span', attributes : { 'class' : 'my-new-class' } };

    The last step is to tell CKEDITOR to load another config files, so in your edit.blade.php or create.blade.php,... you need to add

    <script type="text/javascript">
    		CKEDITOR.config.customConfig = '/my_config.js';

    Not very happy about this last point, because we need to do it for every page, so maybe the adminlte/js/main.js is a better place but be careful when you do a composer update.

    When it's done, make sure you don't have any cache issue, and you will see it in the dropdown list and the html will be:

    alt text

    So like that, you can define some class in your css and the client will be able to use it very easily

Log in to reply

Looks like your connection to AsgardCms was lost, please wait while we try to reconnect.