Displaying the TinyMCE Editor in concrete5

Published on September 29, 2012 by

Despite the lack of documentation, displaying the advanced editor in concrete5 is very easy – and rightfully so. Basically we just need to use the Loader class to load what is needed to use TinyMCE and then give our textarea a class. That’s it!

In this example, we will use the form helper to render our textarea, but this is not a requirement; simply writing the textarea HTML by hand will get the job done as well.

Open the file in which you want to render the advanced editor and add the below.

$form = Loader::helper('form'); // If you want to use the form helper

This is all that is required to render our TinyMCE advanced editor. Add the following (or the corresponding HTML code) to make a compatible textarea.

echo $form->textarea('txtContent', array(
	'class' => 'ccm-advanced-editor'

As you can see, we have added the class ccm-advanced-editor. This is the class that TinyMCE is looking for so that it is optional per textarea.

Now you should see the advanced editor show up when you navigate to the edited page. If you need more flexibility, then you can choose not to use the Loader class for loading the code to initialize TinyMCE; you can just view the source code of your page and copy the code where TinyMCE.init is called and copy it into your file as JavaScript. This gives you 100% control of your text editor.

To allow users to add images and more to the TinyMCE editor, editor controls can be displayed. These controls can easily be presented in a pane above the editor or wherever you may want. Simply add the line below where you want to render the controls.

Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

3 comments on »Displaying the TinyMCE Editor in concrete5«

  1. Nathan

    I’m doing all this and it works great – as long as I’m logged in to c5. However, mine is a public facing form so I need it to work no matter who loads the page. The console message is “ReferenceError: tinyMCE is not defined”. What do I need to do to tell c5 to load the TinyMCE javascript? Loader::element(‘editor_init’); looked promising but seems to have been deprecated.

  2. Nathan

    Okay, for my public-facing External Form, I added


    to the External Form controller’s on_start method to enable TinyMCEifying the textarea.

    • Hello Nathan,

      Thank you very much for your comment. Sorry that I was not able to assist you in time, but I am happy to see that you found a solution to your problem.

Leave a Reply

Your e-mail address will not be published.