Forums

Multiple TinyMCEs in one Block issues

Permalink
I am creating a block that has 3 TinyMCEs in one block, however when I initially try to add it, only the first TinyMCE loads. If I click close and the try to re-add the block, everything displays and functions correctly. Any thoughts on why I would need to "refresh" the add block in order for it to work? I am just starting out with Concrete5 and any help would be greatly appreciated!

<?php echo $form->label('title', 'Recipe Title');?>
<?php echo $form->text('title', $title, array('style' => 'width: 320px'));?>
<br/><br/>
<?php 
defined('C5_EXECUTE') or die("Access Denied.");
//$replaceOnUnload = 1;
$bt->inc('editor_init.php');
?>
<div id="recipeBlock">
   <div class="threeColBlock">
   <?php echo $form->label('ingredients', 'Ingredients');?>
   <textarea id="ccm-content-<?php echo $a->getAreaID()?>" class="advancedEditor ccm-advanced-editor" name="ingredients"></textarea>
   </div>
   <div class="threeColBlock">
   <?php echo $form->label('directions', 'Directions');?>
Viewing 15 lines of 23 lines. View entire code block.

1 Attachment

 
Mnkras replied on at Permalink Reply
Mnkras
any errors in console?
cheinen replied on at Permalink Reply 1 Attachment
Hey Mnkras, thanks for getting back in touch with me. Yes, I am getting 3 errors. See the attached screen shot.
cheinen replied on at Permalink Reply
I get these 3 errors again the second time I try to add the block. However, It does load the remaining two TinyMCEs. Weird.
msglueck replied on at Permalink Reply
msglueck
I solved a similar problem with copies of editor_init.php with changed ids.
Like this:
<div style="text-align: center">
      <?php  $this->inc('editor_init1.php'); ?>
      <textarea id="ccm-content-1" class="advancedEditor ccm-advanced-editor" name="content1"><?php echo $content1; ?></textarea>
   </div>
...
<div style="text-align: center">
      <?php  $this->inc('editor_init6.php'); ?>
      <textarea id="ccm-content-6" class="advancedEditor ccm-advanced-editor" name="content6"><?php echo $content6; ?></textarea>
   </div>


inside the init.php I have var editor_id = 'ccm-content-6'; (and similar in the other files).

Works. A bit crappy to duplicate files like that but I wasn't able to get a working solution with a single init file.

Another thing happened in Firefox. FF seems to cache the TinyMCE instances, so my solution just worked on the first edit. But removing all TinyMCE-instances while closing the edit box resolved this problem. 

ccmValidateBlockForm = function() {
        removeAllEditors();
        return false;
    }
    function removeAllEditors() {
        var i;
        for (i = 0; i < tinyMCE.editors.length; i++) {
            tinyMCE.editors[i].remove();
        }
    }
JBPrime replied on at Permalink Reply
Building on msglueck's answer, I had to solve a few other problems to get multiple TinyMCE instances working properly on my site. The big caveat I ran into was that from a user perspective, I'm only able to display one editor to the user at a time. I use Javascript to switch which editor is visible (effectively making tabs), and in the process update tinyMCE.activeEditor appropriately so all the Concrete5 "insert image", "insert link", etc. buttons put their results in the right editor instance.

First off, I have a copy of the Content block's editor_config.php that sets up a TinyMCE config array, rather than just initializing TinyMCE. This lets me include editor_init.php (and editor_config.php) once for the whole page. So instead of:
<script language="javascript">
tinyMCE.init({
    // .... configuration code
});
</script>

I end up with the same thing, but just as an array variable:
<script language="javascript">
var ccm_editor_configArray = [{
    // .... configuration code
}];
</script>


Now, for each editor textarea, I can have the following:
<textarea id="ccm-content-<?php echo $a->getAreaID(); ?>" class="advancedEditor ccm-advanced-editor" name="blockFieldName"></textarea>
<script language="javascript">
tinyMCE.settings = ccm_editor_configArray[0];
tinyMCE.execCommand( 'mceAddControl', true, "ccm-content-<?php echo $a->getAreaID(); ?>" );
</script>


Also, in order to give each editor the "insert image", "insert link", etc. buttons, I removed the editor_controls line from the bottom of my copy of editor_init.php and ran the loader before each instance of the editor:
<?php Loader::element('editor_controls'); ?>
<textarea id="ccm-content" ...></textarea>
<script>...</script>


Now, in order to get the right editor focused (via whatever method you're using to determine focus; like I said, I made multiple windows/tabs that you can flip through), run the following Javascript:
tinyMCE.activeEditor = tinyMCE.editors[focusedEditorIndex];


Lastly, like msglueck said, you need to clean up your editors when the block edit window is closed. I needed to make one addition at the end of his code after remove() has been called on all the editors:
tinyMCE.editors = [];

Even though they were "removed", their array entries stick around, and that was causing problems for me. YMMV

Also, in calling the remove function from ccmValidateBlockForm(), I had to make sure to only call it if the validation succeeded. Otherwise, the block edit window won't close, and I don't want the editors to be deleted prematurely.

To handle the case of the Cancel button or window close button being clicked, I added the following Javascript to auto.js:
ccm_blockWindowAfterClose = function()
{
    removeAllEditors();
    ccmValidateBlockForm = function() { return true; };
}