Adding tinyMCE to dynamically added textarea

javascript jquery tinymce dhtml

10,710

Solution 1

I tried this:

tinymce.remove();
    tinymce.init({
        selector: 'textarea',
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        },
        height: 100,
        width: 350,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table contextmenu paste code',
          'textcolor'
        ],
        toolbar: 'undo redo | insert | styleselectfontselect fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        content_css: '//www.tinymce.com/css/codepen.min.css'
    });

worked for me.

Solution 2

Did you try to delay that call to "document-ready"? Maybe your DOM isn't fast enough or in your code you are having the same IDs ;)

    $(function(){
            tinyMCE.init({ mode: "none", theme: "simple" });
            tinymce.execCommand("mceAddControl", false, "myTextArea");
    });

10,710

Author by

Goat in toilet

Updated on June 05, 2022

Comments

Goat in toilet almost 2 years

I have some javascript that opens a lightbox which contains dynamically created HTML, including some textareas. I then do...

tinyMCE.init({mode: "none", theme: "simple"});
tinymce.execCommand("mceAddControl", true, id);

...where id is the id of one textarea in particular. I know the id is correct, because that textarea disappears (it suddenly has display:none as an inline style?), but if I remove that inline style, the textarea appears again unchanged, but with no tinymce editor attached. Why is that inline style being applied, and why doesn't it have an attached editor?

Edit for Thariama

Edit 2 - code contained a bug, still doesn't work after fix though...

Ok here is an example that shows the issue.

<html>
    <head>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="tiny_mce.js" type="text/javascript"></script>
    </head>
    <body>
        <ul id="list">
        </ul>    
    </body>

    <template id="thingyTemplate">
        <li>
            <label>Email rich text body:</label>
            <textarea rows="8" cols="50" path="bodyRichText" class="wysiwyg"></textarea>
        </li>
    </template>

    <script>

        var newTemplate = $("#thingyTemplate > *").clone();
        $(newTemplate).find("textarea").attr("id", "myTextArea");
        $("#list").append(newTemplate);

        tinyMCE.init({ mode: "none", theme: "simple" });
        tinymce.execCommand("mceAddControl", false, "myTextArea");

    </script>
</html>

When the page loads, you can see the template element but the clone()'d copy in the list disappears. If you remove the mceAddControl line however the template and its clone are visible.

Atadj over 10 years

Do you know what's the replacement for mode: "none" in v4 of TinyMCE? This option is no longer available.
FibreFoX over 10 years

It seems, that they decided to give you more control about the target: tinymce.com/wiki.php/Configuration:selector, so you directly specify where to spawn the editor. Does this help you?