Embedding the Rich Text Editor

When building custom blocks types or single page editing interfaces, it's easy for developers to include an instance of the custom Concrete CMS rich text editor. In the past, you might have had to include the necessary JavaScript and CSS assets yourself, and use the CK Editor API to activate your text areas. In 5.7.4, however, a simple PHP class makes it easy to include the rich text editor in your editing interfaces, with all of the custom plugins and Concrete integration handled for you automatically.

Let's say you have this form in your block, single page, or page template, that you'd like to swap out with the rich text editor:

<div class="form-group">
    <label class="control-label">Notes</label>
    <textarea name="notes" class="form-control"><?php echo $notes?></textarea>
</div>

Swapping this out with Concrete's rich text editor is simple:

In your form:

<div class="form-group">
    <label class="control-label">Notes</label>
    <?php
    $editor = Core::make('editor');
    echo $editor->outputStandardEditor('notes', $notes);
    ?>
</div>

That's it! Core::make('editor') returns the active editor object, and outputStandardEditor() takes two parameters. The first is the name attribute of the form element, and the second optional parameter is any content you want to appear in the text area. There are two methods that you will most commonly use here, outputBlockEditModeEditor() and outputStandardEditor(). Both methods are used and work the same way, but with one difference, outputBlockEditModeEditor() uses editor custom styles and outputStandardEditor() does not.

In your controller:

Make the LinkAbstractor class available to your controller. The LinkAbstractor handles translating and storing Concrete URLs.

use Concrete\Core\Editor\LinkAbstractor;

In block controllers, add the LinkAbstractor translate methods in edit(), view(), and save().

public function edit()
{
    $this->set('notes', LinkAbstractor::translateFrom($this->notes));
}

public function view()
{
    $this->set('notes', LinkAbstractor::translateFrom($this->notes));
}

public function save($args)
{
    $args['notes'] = LinkAbstractor::translateTo($args['notes']);
    parent::save($args);
}

Single page controllers will have view() available, but will not have edit() or save(). Instead using their own methods to save form input.

Customization

By default, outputStandardEditor() and outputBlockEditModeEditor() enable access to the Concrete file manager and sitemap (if the current user has such access.) They also use any plugins that are enabled in the rich text editor section of the dashboard. If you want a more tailored rich text editor experience, you can customize the editor object.

Let's disable access to the file manager and the sitemap.

$editor = Core::make('editor');
$editor->setAllowFileManager(false);
$editor->setAllowSitemap(false);
echo $editor->outputStandardEditor('notes', $notes);

In 5.7.4.2 and greater, we can include and exclude editor plugins. Here we exclude table, underline, and specialcharacters and include fontsize.

$editor = Core::make('editor');
$editor->getPluginManager()->deselect(array('table', 'underline', 'specialcharacters'));
$editor->getPluginManager()->select('fontsize');
echo $editor->outputStandardEditor('notes', $notes);

API Documentation

You can get more information about the CkeditorEditor object in the API documentation:

\Concrete\Core\Editor\CkeditorEditor API Reference