TinyMCE(v4.7.12)点击工具栏任意按钮时重载问题求助

问题描述 #

TinyMCE 4.7.12在ASP.NET页面首次加载时功能正常，但经过一次回发（PostBack）后，点击工具栏任意按钮都会触发页面重载；刷新页面后编辑器恢复正常。

原因分析 #

1. ASP.NET回发后，$(document).ready不会再次执行，原有的TinyMCE实例与重新渲染的DOM元素绑定失效
2. 回发后编辑器实例未被正确销毁，导致重复初始化引发事件冲突
3. 极端情况下，回发后工具栏按钮被意外渲染为type="submit"，点击时触发表单提交

解决方案 #

1. 适配ASP.NET回发的初始化逻辑 #

将初始化逻辑封装为独立函数，通过ASP.NET的页面生命周期事件监听回发完成，重新初始化编辑器：

$(document).ready(function() {
    // 首次加载初始化
    initTinyMCE();

    // 监听回发完成事件
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function() {
        initTinyMCE();
    });
});

function initTinyMCE() {
    var editorId = '<%=_questionText.ClientID%>';
    
    // 先销毁已存在的编辑器实例，避免重复初始化
    if (tinymce.get(editorId)) {
        tinymce.remove(editorId);
    }

    $('#' + editorId).tinymce({
        setup: function (editor) {
            editor.on('init', function (e) {
                $('#' + e.target.id + '_ifr').removeAttr('title');
                // 强制设置工具栏按钮type为button，防止触发表单提交
                editor.editorContainer.querySelectorAll('button').forEach(btn => {
                    btn.setAttribute('type', 'button');
                });
            });
        },
        script_url: '<%=ResolveUrl("~/tinymce_4.7.12/tinymce.min.js")%>',
        height: 246,
        remove_redundant_brs: true,
        forced_root_block: false,
        branding: false,
        width: 1035,
        relative_urls: false,
        remove_script_host: false,
        external_link_list_url: '<%=ResolveUrl("~/ContentList.aspx?contentType=documents")%>',
        external_image_list_url: '<%=ResolveUrl("~/ContentList.aspx?contentType=images")%>',
        media_external_list_url: '<%=ResolveUrl("~/ContentList.aspx?contentType=video")%>',
        plugins: [
            "image charmap textcolor code upload advlist link <%= (IsHorizontalRuleEnabled? "hr" : "") %> table paste lists"
        ],
        toolbar1: "bold italic underline strikethrough superscript subscript | bullist numlist indent outdent link | <%= (IsHorizontalRuleEnabled? "hr" : "") %> image upload table | charmap code | forecolor backcolor  | styleselect fontselect fontsizeselect ",
        table_default_attributes: {
            cellpadding: '5px'
        },
        table_default_styles: {
            width: '50%'
        },
        paste_as_text: true,
        menubar: false,
        init_instance_callback: "tinyMCEInitialized_<%=ClientID%>",
        default_link_target: "_blank",
        onchange_callback: function (ed) { ed.save(); },
        gecko_spellcheck: true,
        fontsize_formats: "8px 10px 12px 14px 16px 18px 20px 24px 36px"
    });

    // OK按钮处理逻辑
    var ok = $('a[id$=_okBtn]');
    ok.attr('data-href', ok.attr('href'));
    ok.removeAttr('href');
    ok.attr('onclick', 'okButtonClick()');
}

2. 替代方案：使用pageLoad函数 #

ASP.NET中pageLoad函数会在首次加载和每次回发后自动执行，可直接将初始化逻辑放入其中：

function pageLoad() {
    var editorId = '<%=_questionText.ClientID%>';
    
    if (tinymce.get(editorId)) {
        tinymce.remove(editorId);
    }

    $('#' + editorId).tinymce({
        // 同上配置...
    });

    // OK按钮处理...
}

关键注意点 #

• 必须先销毁旧实例再初始化，避免DOM元素绑定多个编辑器实例
• 通过editor.editorContainer遍历工具栏按钮，强制设置type="button"，彻底排除表单提交触发重载的可能
• 确保所有依赖逻辑（比如OK按钮处理）也随回发重新执行，避免元素状态不一致

内容的提问来源于stack exchange，提问作者Subham