TinyMCE JQuery Plugin is not always updating textareas

问题

We have a form that has quite a few textareas (in some cases, as many as 20). Each of these textareas are transformed into wysiwyg editors via the TinyMCE jquery plugin as follows:

var tinymceoptions = {
    script_url: '/Scripts/tiny_mce/tiny_mce.js',
    theme: "advanced",
    mode: "textareas",
    elements: "text,html1",
    theme_advanced_buttons1: "bold,italic,underline,formatselect,separator,image,insertfile,separator,blockquote,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,code,insertimage",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_blockformats: "h1,h2,h3,p",
    width: '100%',
    content_css: Settings["tiny_mce_css"],
    plugins: "advimage,advlink,autoresize,inlinepopups,imagemanager,paste",
    relative_urls: false,
    forced_root_block: false
};

$('textarea.editor').tinymce(tinymceoptions);

The problem we're having is that about 95% of the time, the textareas are not getting updated with the wysiwyg contents prior to form POST. We've even tried forcing the save by looping through each of the mce editors and calling the save() method as follows, prior to submitting the form:

    $('textarea.editor').each(function () {
        $(this).tinymce().save();
    });

Checking the POST again with Fiddler, I found that the textarea is still not being updated with the appropriate value.

Does anyone have any clue as to what might be causing this?

UPDATE

To make matters more... interesting... I have added the following callbacks and I am getting strange results. When the form post WORKS, the value of getContent() is changing each time I press a key. When the form post DOES NOT WORK, getContent is constantly returning the initial value, no matter how much content I enter:

setup: function (ed) {
    ed.onSaveContent.add(function (ed) {
        console.debug('save content: ' + $(this).tinymce().getContent());
    });
    ed.onKeyPress.add(function (ed, e) {
        console.debug('Editor contents was modified. Contents: ' + $(this).tinymce().getContent());
    });
}

UPDATE 2

Getting closer? I have found that clearing cache seems to temporarily "fix" the problem. Subsequent visits will display the broken behavior.

回答1:

I determined that misuse of head.js was causing the issue. We were loading some items via ajax on head.ready() and applying the tinyMCE during $.ready(). Changing $.ready() to head.ready() solved the problem.

来源：https://stackoverflow.com/questions/7639288/tinymce-jquery-plugin-is-not-always-updating-textareas

标签

jquery

jquery-plugins

tinymce