Jordan Lev Logo Jordan Lev's Concrete5 Tips

How to make things work when building a Concrete5 website.

New in Concrete 5.5.2: Multiple Rich Text Editors on the Same Edit Page

| Comments

The release of Concrete version 5.5.2 finally addresses a long-standing bug that prevented multiple “rich text editor” controls (a.k.a. WYSIWYG editors, a.k.a. TinyMCE) from coexisting on the same page. Prior to this release, the javascript for the rich text editors would interfere with each other (as well as with the image and page link choosers), so that inserting an image into one field would wind up in another field (or sometimes not show up at all).

As of Concrete version 5.5.2, it’s now really simple to include as many rich text editors as you’d like on a single block add/edit page or dashboard page:

1: Include this one time (regardless of how many rich text editors you have) at the top of the file:

1
<?php Loader::element('editor_config'); ?>

2: Include these two lines in each place you want a rich text editor:

1
2
<?php Loader::element('editor_controls'); ?>
<textarea name="your-field-name" class="ccm-advanced-editor"></textarea>

That’s it – nice and simple! Note that the class="ccm-advanced-editor" is required on the textarea (this is how the TinyMCE javascript knows which text areas to apply itself to).

Here is a sample edit.php file from an imaginary block that has two fields for content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php defined('C5_EXECUTE') or die("Access Denied.");

Loader::element('editor_config');
?>

<div class="ccm-block-field-group">
    <h2>First Example Field</h2>
    <?php Loader::element('editor_controls'); ?>
    <textarea id="field_example_1" name="field_example_1" class="ccm-advanced-editor"><?php echo $field_example_1; ?></textarea>
</div>

<div class="ccm-block-field-group">
    <h2>Second Example Field</h2>
    <?php Loader::element('editor_controls'); ?>
    <textarea id="field_example_2" name="field_example_2" class="ccm-advanced-editor"><?php echo $field_example_2; ?></textarea>
</div>

I’ve updated Designer Content in the marketplace to version 3.1, which now includes this functionality. It also makes the generated code simpler, which is a major bonus!


Bonus for astute readers: You may be wondering how the “editor_controls” element (the blue Concrete5 bar that sits above the normal TinyMCE controls) knows which text area to attach itself to… Turns out it doesn’t! The Concrete5 bar will insert images, files, and links into the text editor that currently has the focus (or the last one to have the focus if neither of them has the focus currently). Usually this isn’t an issue because people tend to insert images and links when they’re typing into a specific editor field, so the field they’re typing into will by definition already have the focus. But I can see how this might cause occasional confusion… not a huge deal but something to be aware of.

I did see something in the code that looks like it lets you specify an “id” to apply controls to, but I haven’t had the time or motivation to investigate further. If anyone has any ideas about this, please leave them in the comments.

Comments