Giorgi
Giorgi

Reputation: 11

Multi TinyMCE with append jQuery

On select change creating textarea, which is multi. Not only one, It will be, maybe 3-5. When textarea created I need changed with TinyMCE editor. I've tried many different way but I can't do it.

$(".add_additional_fields").click(function() {
        var typeContent = $(this).closest(".typeContent");
        var languageContent = typeContent.closest(".languageContent");
        var langId = $(languageContent[0]).attr("data-language-id");
        // Change additional fields type start
        $('body').on('change','.additional_fields_type',function() {
            var $this = $(this);
            var value = $this.val();
            var $parent = $($this[0].closest(".fieldwrapper3"));
            var chiledTd=$($parent.children("td:nth-child(3)")[0]);

            switch(parseInt(value)){
                case 0: {
                    chiledTd.html(choose);
                } break;
                case 1: {
                    var varchar = varChar(langId);
                    chiledTd.html(varchar);
                } break;
                case 2: {
                    var textarea = textArea(langId);
                    chiledTd.html(textarea);
                } break;
                case 3: {
                     guid = createGuid();
                     var html = createFileHtml(guid, langId);
                     chiledTd.html(html);
                } break;
            }

        }); 
        // Change additional fields type end
});

on choose third (3) case appended textarea

function textArea(languageId) {
    return "<textarea name='field[" + languageId + "][]' id=\"tiny1\"></textarea>";
}

But I can't make it TinyMCE.

How can I solve it?

Thanks

Upvotes: 0

Views: 215

Answers (1)

Giorgi
Giorgi

Reputation: 11

Solved with adding this:

setup: function (editor) {
    editor.on('init', function () {
         this.setContent('');
    });
}

Original:

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
    toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor  | print preview code ",
    image_advtab: true,
    external_filemanager_path:"https://domain/admin/filemanager/",
    filemanager_title:"Filemanager" ,
    external_plugins: { "filemanager" : "https://domain/assets/plugin.min.js" },
    setup: function (editor) {
        editor.on('init', function () {
             this.setContent('');
        });
    }
});

Upvotes: 1

Related Questions