Chrome中使用nicEdit脚本出现重复回发问题求助

问题原因 #

nicEdit在Chrome等现代浏览器中会动态替换textarea为富编辑容器（如iframe），这种DOM修改与Web Forms的回发机制冲突，加上原生submit按钮的触发逻辑，导致页面被两次加载——第一次是正常回发（IsPostBack=true），第二次被意外触发为首次加载（IsPostBack=false）。IE浏览器的DOM处理逻辑与现代浏览器不同，因此未出现该问题。

解决方案 #

1. 替换原生submit为ASP.NET服务器端按钮

Web Forms的服务器端按钮会通过ViewState和回发机制统一处理提交逻辑，避免原生按钮与nicEdit的DOM操作冲突。

2. 条件初始化nicEdit

回发后页面重新渲染时，避免重复初始化nicEdit，防止DOM重复修改引发异常。

3. 拦截重复提交事件

通过标记表单提交状态，阻止同一提交事件被多次触发。

修改后的代码示例 #

头部脚本部分

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="nicEdit.js" type="text/javascript"></script>
<script type="text/javascript">
    <%-- 仅在首次加载时初始化nicEdit --%>
    <% if (!IsPostBack) { %>
    bkLib.onDomLoaded(function () {
        var myNicEditor = new nicEditor();
        myNicEditor.setPanel('myNicPanel');
        myNicEditor.addInstance('txtData');
    });
    <% } %>

    <%-- 阻止表单重复提交 --%>
    document.addEventListener('submit', function(e) {
        const form = e.target;
        if (form.classList.contains('submitting')) {
            e.preventDefault();
            return;
        }
        form.classList.add('submitting');
    });
</script>
</asp:Content>

主体内容部分

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="myNicPanel" style="width: 545px;"> </div>
    <%-- 转为服务器端textarea，确保回发时值能正确传递 --%>
    <textarea id="txtData" runat="server" rows="12" cols="100"></textarea>

    <%-- 使用ASP.NET服务器端按钮处理回发 --%>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit Form" OnClick="btnSubmit_Click" />
</asp:Content>

服务器端提交逻辑（示例）

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // 获取编辑内容
    string editedContent = txtData.Value;
    // 执行后续业务逻辑
}

额外说明 #

如果上述方案未能解决问题，可尝试更新nicEdit至最新版本，排查是否存在已知的浏览器兼容性bug；若仍无效，可考虑替换为更适配现代浏览器的富文本编辑器（如CKEditor、TinyMCE）。

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