CKEditor

Build

Browse to http://ckeditor.com/download

Click Online Builder in the Customize panel.

Choose the Standard preset.

Select the following from Available plugins:

Color Button
Color Dialog
Youtube Plugin

Select Moono (not Moono-Lisa) from available skins.

Download the Optimized version of the CKEditor.

Remove the current ckeditor folder from the base app:

base/static/vendor/js/ckeditor/

Extract the archive to the ckeditor folder:

base/static/vendor/js/ckeditor

Remove the samples folder:

rm -r base/static/vendor/js/ckeditor/samples/

Configure

The base app has three standard templates for CKEditor:

Template Description JavaScript
_ckeditor.html Our standard CKEditor config_simple.js
_ckeditor_color.html Our standard editor with the option of colouring the foreground and background text. config_colortext.js
_ckeditor_user.html A more limited editor (we use this for candidates and recruiters) config_user.js

Note

The Django templates are in the standard templates folder: base/templates/base/

Note

The JavaScript files are in the base/js/ckeditor folder: base/static/base/js/ckeditor/, https://gitlab.com/kb/base/tree/master/base/static/base/js/ckeditor

The _ckeditor.html template can be included on a page as follows:

{% block script_extra %}
  {{ block.super }}
  {% include 'base/_ckeditor.html' %}
{% endblock script_extra %}

Note

Any block with an ID of id_description will become a rich text editor.

To include _ckeditor_color.html or _ckeditor_user.html replace the {% include 'base/_ckeditor.html' %} line with one of the following:

{% include 'base/_ckeditor_color.html' %}
{% include 'base/_ckeditor_user.html' %}

If you don’t have a text field with the ID of id_description, you can change the ID e.g:

{% block script_extra %}
  {% include 'base/_ckeditor.html' with id_textarea='id_notes' %}
  <!-- ...

To make any other text field into rich text, add CKEDITOR.replace sections below the include section e.g:

{% block script_extra %}
  {{ block.super }}
  {% include 'base/_ckeditor.html' %}
  <script type="text/javascript">
    CKEDITOR.replace('id_footer_left');
    CKEDITOR.replace('id_footer_right');
  </script>
{% endblock script_extra %}

Note

The default config.js file can be found in the base/static/vendor/js/ckeditor/config.js folder.

Template

To display the rich text on an HTML template:

{% autoescape off %}
  {{ c.description }}
{% endautoescape %}

Warning

This by-passes the Django auto-escaping and it therefore a security risk. Don’t display user input using this method.

User Documentation

Spell Check

Hold down the Ctrl key to view the browser spell check options.