TinyMCE & Fancybox - editor won't work on second view

Question 1

I've added TinyMCE to my project, and am using it on a text area which pops up in a fancybox. The first time I action it, it works fine, but if I then close it and try to open it again, it doesn't let me type in the box. It looks okay, just that the text area is kind of greyed out, and won't accept input. If I click any of the buttons (bold, italic, justify, font selection etc.), the console gives the error "j is null".

I've found some similar problems on the web, but couldn't find anyone with a similar set up to mine, so I'm confused. I think the problem may be that I'm trying to add a new TinyMCE instance every time the fancybox is shown, and then I need to destroy it afterwards, before re-initialising it, maybe? But I'm not sure how to destroy it, or even if that's what I need to do.

Here's my code:

<head>...</head>
<body>
<script type="text/javascript">
 function tinyMCE_setup() {
   tinyMCE.init({
      mode : "textareas",
      theme : "advanced",
      plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
      theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,forecolor",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,code",
      theme_advanced_buttons3 : "",
      theme_advanced_buttons4 : "",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "center",
      //theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true
   });
}
 function tinyMCE_remove() {
   //tinyMCE.destroy();
}
</script>

... some html ...

 <!-- Text -->
 <div style="display:none">
  <div id="addtext" class="addcontent">
    <p class="headline bg_text">add text or caption</p>
    <form id="addText" name="addText" action="add_text.php" method="post" onSubmit="return checkAddText()">
     <label>enter your caption or text here</label>
     <textarea id="text" name="text" rows="10" style="clear: both; margin-bottom: 14px; margin-top: 5px; width: 466px"></textarea>
      <input type="image" name="submit" id="imageField2" src="images/site/button_text_submit.gif" onMouseOver="this.src='images/site/button_text_submit_over.gif'" onMouseOut="this.src='images/site/button_text_submit.gif'"/>
    </form>
  </div>
 </div>

... more html ...

</body>
</html>

<script>
$(document).ready(function() {

 $("a#link_addtext").attr("href", "#addtext");

 $('a#link_addtext').fancybox({
    'hideOnContentClick': false,
        'padding' : 0,
    'overlayOpacity'    :   0.1,
        'onComplete': function(){
      tinyMCE_setup();
    }
    });

  ... other javascript ..
}
</script>

Question 2

You need to shut down tinymce correctly before closing the fancybox in order to be able to open the tinymce editor a second time. Use this to shut it down correctly

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

Question 3

I've continued my extensive search and have found a guide on adding an additional button to the Article Editor for Joomla 1.5.

The tutorial is available at: http://tushev.org/articles/programming/18-how-to-create-an-editor-button-editors-xtd-plugin-for-joomla.

Straight out of the box this won't work with Joomla 2.5 and Joomla 3.0 as the XML manifest standards have changed ever-so-slightly. Keeping in line with the tutorial use this XML manifest instead.

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="plugin" method="upgrade" group="editors-xtd">
        <name>test</name>
        <author>Name</author>
        <creationDate>Month 2013</creationDate>
        <copyright>Month Name. All rights reserved.</copyright>
        <license>GPL</license>
        <authorEmail>Email</authorEmail>
        <authorUrl>Your URL</authorUrl>
        <version>1.0.0</version>
        <description>
            "adds the button 'test' to the editor"
        </description>
        <files>
            <filename plugin="test">test.php</filename>
        </files>
</extension>

The tutorial PHP is correct and is as follows:

<?php

 // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

jimport( 'joomla.plugin.plugin' );

class plgButtonTest extends JPlugin {

    function plgButtonTest(& $subject, $config)
    {
        parent::__construct($subject, $config);
    }
    function onDisplay($name)
    {
        $js =  "                      
         function buttonTestClick(editor) {
                             txt = prompt('Please enter something','123');
                             if(!txt) return;
                               jInsertEditorText('{test '+txt+'}', editor);
        }";
        $css = ".button2-left .testButton {
                    background: transparent url(/plugins/editors-xtd/test.png) no-repeat 100% 0px;
                }";
        $doc = & JFactory::getDocument();
        $doc->addScriptDeclaration($js);
        $doc->addStyleDeclaration($css);
        $button = new JObject();
        $button->set('modal', false);
        $button->set('onclick', 'buttonTestClick(''.$name.'');return false;');
        $button->set('text', JText::_('Test'));
        $button->set('name', 'testButton');
        $button->set('link', '#');
        return $button;
    }
}
?>

Thank you all for your help. If you have any other better methods I'd be most grateful.

Question 4

Assuming that you are using fancybox v2.x and that you have properly initialized jQuery and fancybox files in your php document, I would do:

<?php        
    if(something) { 
      $message = "message sent!";
?>

<script>
    $(document).ready(function() {
        $.fancybox("<?php echo $message; ?>",{
            minWidth: 'auto',
            minHeight: 'auto'
        }); // fancybox
    }); // ready
</script>

<?php 
    }; // close php if
?>

Question 5

In tinyMCE's case (and most other editors) it's an <iframe> (as to not inherit styling from the parent page, among other reasons), but the magic is the contentEditable attribute being set to true.

You can read more detail in the working draft of HTML5 here.

You can test a very simplified demo here, the editors do much more of course with their toolbars, a backing <textarea> to store the markup for server-submission, etc...but your question seems to be how are you editing the elements, the core of that is contenteditable.

Question 6

It is a bad practice to use inline JS code. Simply create object, bind events and then display:

var $src = $('<div class="col-md-3"><div class="checkbox checkbox-success"><select><option value="0">False</option><option value="1">true</option></select></div></div>');

$src.find('select').on('change', function() {
  $('#checkbox1').prop('checked', this.value == 1 ? true : false);
});

$.fancybox.open({
  src  : $src,
  type : 'html',
  smallBtn : true,
  toolbar  : false
});

https://codepen.io/anon/pen/WXNLmX?editors=1010

TinyMCE & Fancybox - editor won't work on second view

Answers

php,tinymce,fancybox