Customizing the online editor

In Chamilo 1.10 and later, we use CKeditor as a WYSIWYG (What You See Is What You Get) or “online” HTML editor. This was not the case with Chamilo 1.9, which still used the now-dead FCKeditor.
Sometimes, you might want to customize the editor for some particular item in Chamilo. This can be done, for existing custom element types, in the src/Chamilo/CoreBundle/Component/Editor/CkEditor/Toolbar/ directory.
There, you’ll find a series of files of the following form:
/* For licensing terms, see /license.txt */
​
namespace Chamilo\CoreBundle\Component\Editor\CkEditor\Toolbar;
​
/**
 * Messages toolbar configuration
 *
 * @package Chamilo\CoreBundle\Component\Editor\CkEditor\Toolbar
 */
class Messages extends Basic
{ 
    /**
     * Get the toolbar config
     * @return array
     */
    public function getConfig()
    {
        if (api_get_setting('more_buttons_maximized_mode') != 'true') {
            $config['toolbar'] = $this→getNormalToolbar();
        } else {
            $config['toolbar_minToolbar'] = $this→getMinimizedToolbar();
            $config['toolbar_maxToolbar'] = $this→getMaximizedToolbar();
        }
​
        $config['fullPage'] = true;
        //$config['height'] = '200';
        return $config;
    }
​
    /**
     * Get the toolbar configuration when CKEditor is maximized
     * @return array
     */
    protected function getMaximizedToolbar()
    {
        return [
            ['NewPage', 'Templates', '-', 'Preview', 'Print'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
            ['Undo', 'Redo', '-', 'SelectAll', 'Find', '-','RemoveFormat'],
            ['Link', 'Unlink', 'Anchor', 'Glossary'],
            [ 'Image', 'Mapping', 'Video', 'Oembed', 'Youtube', 'Flash', 'Audio', 'leaflet', 'Smiley', 'SpecialChar', 'Inserthtml', 'Asciimath', 'Asciisvg' ],
            '/',
            ['Table', '-', 'CreateDiv'],
            ['BulletedList', 'NumberedList', 'HorizontalRule', '-','Outdent', 'Indent', 'Blockquote'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', '-', 'TextColor', 'BGColor'],
            [api_get_setting('allow_spellcheck') == 'true' ? 'Scayt' : ''],
            ['Styles', 'Format', 'Font', 'FontSize'],
            ['PageBreak', 'ShowBlocks', 'Source'],
            ['Toolbarswitch']
        ];
    }
​
    /**
     * Get the default toolbar configuration when the setting
     * more_buttons_maximized_mode is false
     * @return array
     */
    protected function getNormalToolbar()
    {
        return [
            ['Link', 'Unlink'],
            ['Image', 'Video', 'Flash', 'Oembed', 'Youtube', 'Audio'],
            ['Table', 'Smiley'],
            ['TextColor', 'BGColor'],
            ['Source'],
            '/',
            ['Font', 'FontSize'],
            ['Bold', 'Italic', 'Underline'],
            ['JustifyLeft', 'JustifyCenter', '-', 'NumberedList', 'BulletedList']
        ];
    }
    /**
     * Get the toolbar configuration when CKEditor is minimized
     * @return array
     */
    protected function getMinimizedToolbar()
    {
        return [
            $this→getNewPageBlock(),
            ['Undo', 'Redo'],
            ['Link', 'Image', 'Video', 'Flash', 'Audio', 'Table','Asciimath', 'Asciisvg'],
            ['BulletedList', 'NumberedList', 'HorizontalRule'],
            ['JustifyLeft', 'JustifyCenter'],
            ['Format', 'Font', 'Bold', 'Italic', 'Underline', 'TextColor', 'BGColor'],
            ['Toolbarswitch']
        ];
    }
}
As you can probably appreciate, the structure is simply:
a class extending the “Basic” class for the editor
a getConfig() method to get some global configuration (like size of the area)
a getMaximizedToolbar() method that defines the options to be shown when maximized
a getNormalToolbar() method that defines the options to be shown when normal
a getMinimizedToolbar() method that defines the options to be shown when minimized
If you want to change one of the tools offered in the toolbars for a specific case, just change it here.
Note, however, that this customization is not part of the normally-accepted customizations, so you will have to keep it on record somewhere to be able to apply it again when the next version comes out.
Developer Guide - Previous
Theming certificates
Next - Developer Guide
The Chamilo logo
Last updated 6 months ago