Displaying the TinyMCE Editor in concrete5
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
Loader::element('editor_config');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.
Loader::element('editor_controls');
3 comments on »Displaying the TinyMCE Editor in concrete5«
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.
Okay, for my public-facing External Form, I added
$this->addHeaderItem(Loader::helper(‘html’)->javascript(‘tiny_mce/tiny_mce.js’));
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.