javascript - TinyMCE init fails after ajax refresh - Stack Overflow

admin管理员组

文章数量:1399974

I'm using TinyMCE 4.1.10 to enable inline editing on several divs on a page. Everything works fine on initial page load, but if I tear down the editors and rebind the textareas in an ajax call TinyMCE won't hook back up to them. The binding is done with Knockout.

Here is the function that initially loads the data, and also gets called when a refresh occurs.

    this.loadLetterFields = function () {
        var editors = $("div.editable");
        for (var i = editors.length - 1; i > -1; i--) {
            var ed_id = editors[i].id;
            tinymce.execCommand("mceRemoveEditor", false, ed_id);
        }

        $.getJSON(_this.fieldURL + "/" + _this.letterId() + "/" + _this.clientId() + "/" + _this.caseId(), function (data) {
            for (var i = 0; i < data.length; i++) {
                // Reload fields
            }
        });

        tinymce.init({
            selector: "div.editable",
            inline: true,
            menubar: false,
            statusbar: false,
            toolbar: "bold italic underline | alignleft aligncenter alignright | bullist numlist outdent indent",
            forced_root_block: false
        });
    };

I've pieced what I have together from several SO posts, but this seems to be a recurring issue. Are there any solutions? Is this a known bug?

Update: I just noticed that it doesn't seem to be all of the divs, but there is not difference in the divs that are working and the ones that aren't. They are all generated by the same ko if binding.

I'm using TinyMCE 4.1.10 to enable inline editing on several divs on a page. Everything works fine on initial page load, but if I tear down the editors and rebind the textareas in an ajax call TinyMCE won't hook back up to them. The binding is done with Knockout.

Here is the function that initially loads the data, and also gets called when a refresh occurs.

    this.loadLetterFields = function () {
        var editors = $("div.editable");
        for (var i = editors.length - 1; i > -1; i--) {
            var ed_id = editors[i].id;
            tinymce.execCommand("mceRemoveEditor", false, ed_id);
        }

        $.getJSON(_this.fieldURL + "/" + _this.letterId() + "/" + _this.clientId() + "/" + _this.caseId(), function (data) {
            for (var i = 0; i < data.length; i++) {
                // Reload fields
            }
        });

        tinymce.init({
            selector: "div.editable",
            inline: true,
            menubar: false,
            statusbar: false,
            toolbar: "bold italic underline | alignleft aligncenter alignright | bullist numlist outdent indent",
            forced_root_block: false
        });
    };

I've pieced what I have together from several SO posts, but this seems to be a recurring issue. Are there any solutions? Is this a known bug?

Update: I just noticed that it doesn't seem to be all of the divs, but there is not difference in the divs that are working and the ones that aren't. They are all generated by the same ko if binding.

• javascript
• tinymce
• tinymce-4

Share Improve this question Follow edited Jul 8, 2015 at 21:35 Devin Goble asked Jul 7, 2015 at 15:43 Devin GobleDevin Goble 2,89744 gold badges3232 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I ran into a similar issue. My solution was to call tinyMCE.remove(); before calling the reload. Then tinyMCE.init(); would work as expected.

本文标签： javascriptTinyMCE init fails after ajax refreshStack Overflow