CKEditor

Introduction

The CKEditor module allows Drupal to replace textarea fields with CKEditor. CKEditor is an online rich text editor that can be embedded inside web pages. It is a WYSIWYG editor which means that the text edited in it looks as similar as possible to the results end users will see after the document gets published. It brings to the Web popular editing features found in desktop word processors such as Microsoft Word and OpenOffice.org Writer. CKEditor is truly lightweight and does not require any kind of installation on the client computer.

Useful links: CKEditor website | CKEditor for Drupal 7 Documentation | User's Guide.

Configuration

  1. CKEditor profiles can be configured in the Administration panel > Configuration > Content Authoring > CKEditor section. Profiles determine which options are available to users based on the input format system.
  2. For the Rich Text Editing to work you also need to configure your filters for the users that may access Rich Text Editing. Either grant those users Full HTML access or use the following list of tags in the HTML filter:
    <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <caption> <tbody> <tr> <td> <em> <b> <u> <i> <strong> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike>
    Note: be careful when granting users access to create tags like <iframe>.
    If you are going to use CKEditor with the Filtered HTML input format, please read the "Setting up filters" section in the README.txt file.
  3. To have better control over line breaks, you should disable the Line break converter setting in the chosen Text format (recommended).
  4. All configuration options described in the API documentation that cannot be easily changed in the administration area can be set in the Advanced Options section in the CKEditor profile.

Troubleshooting

Take a look at the list of common problems when installing CKEditor. If you are looking for more information, have any trouble with the configuration, or found an issue with the CKEditor module, please visit the official project page. More information about how to customize CKEditor for your theme can be found here.

Plugins: Code Snippet and MathJax

Code Snippet and MathJax are special plugins for CKEditor that are using external JavaScript libraries to style content inside editing area. The result that is returned by CKEditor is just an HTML tag that needs to again processed by a filter (either server side or client side) in order to display it properly to the user.

MathJax (Mathematical Formulas)

With mathjax plugin, CKEditor produces LaTeX code surrounded by <span class="math-tex"></span>. In order to have it properly rendered on your site you might need to add MathJax on your website, the simplest way to do this is to add this to your theme:
<script src="http://cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>

Code Snippet

With codesnippet plugin, CKEditor produces code snippets surrounded by <pre><code></code></pre>. Note: You might need to add highlight.js on your website so that the displayed code was rendered nicely as in CKEditor. The simplest way to do this is to add this to your theme:
<link rel="stylesheet" href="http://cdn.ckeditor.com/4.5.4/full-all/plugins/codesnippet/lib/highlight/styles/default.css">
<script src="http://cdn.ckeditor.com/4.5.4/full-all/plugins/codesnippet/lib/highlight/highlight.pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>

Uploading images and files

There are three ways for uploading files:

  1. By using CKFinder (commercial), an advanced Ajax file manager.
  2. By using a dedicated module like IMCE.
  3. By using the core upload module.