Cannot configure TinyMCE textareas and dynamic add...

Permalink 1 user found helpful

I would like to include TinyMCE editors on my add/edit block form, but I can't configure the editors.

At the top of my form.php file (which is included by add.php and edit.php), I put :

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

and when inserting the textareas :

<script type="text/javascript">
         selector: "textarea.ccm-advanced-editor",
         width: 300,
         height: 120
<?php echo $form->textarea('caption_' . $i, ${"caption_{$i}"}, array('placeholder' => 'Enter a caption', 'class' => 'ccm-advanced-editor')); ?><br />

This second piece of code is actually in another file, /elements/fieldset.php, that is included as many times as needed in form.php.

The tinyMCE editors are displayed, but I really can't configure the width and height. I tried overriding them in form.css, and was able to change the width in doing so (but not the height !), however, it doesn't behave well and sometimes the width is wrong.

The options I put in tinymce.init are not taken into account.

Furthermore, I have another question :

Fieldsets containing the tinyMCE textareas can be added dynamically after form.php was loaded. This works fine with normal textareas, but as soon as I use tinyMCE, tinyMCE is not applied to the newly generated textareas (which do have the 'ccm-advanced-editor' class). The added textareas are just basic textareas. How can I solve this ?


View Replies:
jordanlev replied on at Permalink Reply
For width and height, you can pass those in as args to the 'editor_config' element, like so:
<?php Loader::element('editor_config', array('editor_width' => 200, 'editor_height' => 100)); ?>

When you output the editor itself, you don't need to include your own javascript for it. Just do this:
<?php Loader::element('editor_controls'); ?>
<?php echo $form->textarea('caption_' . $i, ${"caption_{$i}"}, array('placeholder' => 'Enter a caption', 'class' => 'ccm-advanced-editor')); ?><br />

Not sure how you'd initialize a rich text editor dynamically after page loads (probably need to pull out the js code from that editor_config element, and change the 'selector' to a different class so it won't overwrite existing editors already on the page).