CODEWITHSUNDEEP
javascriptjqueryajaxtinymce-4
Alex
Alex

Reputation: 1309

Loading TinyMCE on dynamically loaded TextArea not working

I am trying to create a text-area that gets dynamically loaded and automatically a TinyMCE editor gets applied.

In spite of the many topics covering this subjects and even some tutorials I do not seem to get it working.

I am possibly overlooking a very small item but if I only knew what..

The situation

Current install : TinyMCE 4.x + jQuery v1.10.1 A HTML page that loads a textarea through an AJAX call.

The I try to initialize the TinyMCE editor on the text-area. There it fails.

FireBug error console tells me : ReferenceError: tinyMCE is not defined But it has been defined. I even tried to set absolute paths.

    <title>jQuery test file</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/classes/jquery.tinymce.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.EditorField').tinymce({
            script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
        });
    });
    </script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
         $.get("test.php", function( EditorHTML ) {
            $("#EditorSection").html( EditorHTML );
            tinyMCE.execCommand('mceAddEditor', false, '.EditorField'); 
        });
      });
   </script>

The HTML form code I use :

<form method="post" action="result.php">
    <div>
        <div id="EditorSection">

        </div>
        <br />
        <input type="submit" name="save" value="Submit" />
        <input type="reset" name="reset" value="Reset" />
    </div>
</form>

And probably also very important the code loaded by AJAX :

<textarea name="TextArea1" cols="20" rows="2" class="EditorField" id="WysyWig" style="background-color: red; width: 100%; height: 700px;">

Dynamically loaded text-area content

I tried multiple options here:

tinyMCE.execCommand('mceFocus', false, '.EditorField');
tinyMCE.execCommand('mceAddEditor', true, '.EditorField');

Or directly by the ID itself. shouldn't make a difference

tinyMCE.execCommand('mceAddControl', false, '#WysyWig');

I hope someone sees what I am overlooking.

Upvotes: 2

Views: 5251

Answers (1)

pistou
pistou

Reputation: 2867

Replace your script tags by one :

<script type="text/javascript">
jQuery(document).ready(function() {
    $.get("test.php", function( EditorHTML ) {
        $("#EditorSection")
            .html( EditorHTML )
            .find('.EditorField')
            .tinymce({
                script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
            });
        tinyMCE.execCommand('mceAddEditor', false, '.EditorField'); 
    });
});
</script>

Basically, you'll wait the Ajax response, and once it is in your DOM then you will initialize tinyMCE.

Upvotes: 2

Related Questions