Using CKEditor with CakePHP

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on linkedin
LinkedIn

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.

More to explore

Photo by Caspar Camille Rubin on Unsplash

Getting WP Post and Postmeta in Single Rows

WordPress uses wp_posts to store post, page, and Custom Post Type (CPT) data the wp_postmeta table for Custom Metabox data. To retrieve this data you have to read for the post plus multiple linked postmeta rows. In this post, we conquer postmeta with subqueries.

Using Redis with WordPress on Ubuntu

Redis is “an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes with radius queries and streams.” Translation? It makes websites run faster.

Nasa on Unsplash

Building an API Endpoint with Amp (PHP)

API endpoints in web apps are pretty typical these days, but there may be reasons to provide data outside of the context of an application. In this post, we’ll explore how to make a stand-alone API endpoint using PHP and Amp.

Leave a Comment

Your email address will not be published. Required fields are marked *