Using CKEditor with CakePHP

CKEditor is a popular FOSS rich-text editor used in many software products and by a whole slew of companies.  This tutorial will show you how to include it in your CakePHP applications.

I’ll be using an app baked off the “articles” table provided in the CakePHP Blog Tutorial.

Downloading CKEditor

Visit the CKEditor web site and download one of the packages (Basic, Standard, or Full).  Unzip the package and copy it over to your project’s webroot folder.

Configuring your App

After baking (“bin/cake bake all articles”) the articles table, you will have a set of CRUD screens.  We’re going to add CKEditor to the “create” (add) and “update” (edit) screens, but first let’s go to our default.ctp and include the CKEditor JavaScript file.

// src/Template/Layout/default.ctp
…
    <?= $this->Html->css('base.css') ?>
    <?= $this->Html->css('cake.css') ?>
    <?= $this->Html->script('/ckeditor/ckeditor.js') ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
...

Next, modify edit.ctp so that it can use CKEditor.  Still using the articles table from the CakePHP Blog Tutorial, the default form code looks like this:

// src/Template/Articles/edit.ctp
...
    <?= $this->Form->create($article) ?>
    <fieldset>
        <legend><?= __('Edit Article') ?></legend>
        <?php
            echo $this->Form->input('title');
            echo $this->Form->input('body');
        ?>
    </fieldset>
    <?= $this->Form->button(__('Submit')) ?>
    <?= $this->Form->end() ?>
...

We need to modify the form input for body so that it has an ID:

// src/Template/Articles/edit.ctp
...
    <?= $this->Form->create($article) ?>
    <fieldset>
        <legend><?= __('Edit Article') ?></legend>
        <?php
            echo $this->Form->input('title');
            echo $this->Form->input('body', ['id' => 'richTextEditor']);
        ?>
    </fieldset>
    <?= $this->Form->button(__('Submit')) ?>
    <?= $this->Form->end() ?>
...

By associating an ID with the form input, we can then replace the default editor box with CKEditor.  I used “richTextEditor” as my ID name, but it can be anything you choose; it just has to made the name used in the script call (below).  Add the following to the bottom of your edit.ctp:

// src/Template/Articles/edit.ctp
…
<script>
    CKEDITOR.replace('richTextEditor');
</script>

That’s it; now when you visit the edit page in your browser, you should see something like this:

In the above screenshot, the Basic editor is shown; the Standard and Full versions add more buttons and widgets.

Do the same thing to your add.ctp so that when we add a new article we can use CKEditor as well.  Be sure to add something that uses the rich text features so that we can fully test it.

Displaying the Content

If you added or updated an article to use rich text and you then visit the view page, you’ll see something like this:

Not pretty!  We’re seeing the HTML tags on our view screen.  Fortunately, there’s an easy fix.  Edit your view.ctp file and change this line:

    <div class="row">
        <h4><?= __('Body') ?></h4>
        <?= $this->Text->autoParagraph(h($article->body)); ?>
    </div>

To this:

    <div class="row">
        <h4><?= __('Body') ?></h4>
        <?= $this->Text->autoParagraph($article->body); ?>
    </div>

And now your view screen should display the content with the HTML tags interpreted rather than displayed:

Easy, huh?  CKEditor is a great way to add functionality to your web site or application, improving the appearance of large text blocks and giving your end-users a capability that they've come to expect.