Mozilla Firefox下TinyMCE编辑器不显示文本框内容问题求助

阿华AIGC实验室

2026-5-28

解决Firefox中模态框TinyMCE编辑器无法加载内容的问题

这是Firefox特有的DOM渲染与TinyMCE初始化时机不匹配导致的问题——Chrome对隐藏元素的内容处理更宽松，所以没出现异常。下面分析原因并给出针对性解决方案：

核心原因

Firefox在处理未显示的DOM元素（比如默认隐藏的模态框）时，不会立即解析或读取其内容属性。你的初始化代码在页面加载完成时就执行了，此时模态框还处于隐藏状态，导致TinyMCE无法正确读取textarea的预绑定内容；另外tinymce.remove()的DOM清理操作在Firefox下可能存在延迟，和新编辑器的初始化时序冲突。

解决方案

1. 绑定模态框显示完成事件再初始化TinyMCE

如果你的模态框是Bootstrap（ASP.NET项目常用），不要在$(function())里直接初始化，而是监听shown.bs.modal事件——确保模态框完全显示、DOM元素渲染完成后再初始化编辑器：

// 假设你的模态框ID是#editorModal
$('#editorModal').on('shown.bs.modal', function () {
  // 移除所有活跃编辑器
  tinymce.remove();
  // 初始化新编辑器
  tinymce.init({
    selector: '.editor-content',
    menubar: false,
    branding: false,
    height: 350,
    code_dialog_height: 200,
    plugins: ['advlist autolink lists charmap print preview anchor textcolor code', 'searchreplace visualblocks code fullscreen', 'insertdatetime table contextmenu paste code help wordcount'],
    toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | table | code ',
    // 手动绑定内容，确保Firefox能正确读取
    setup: function (editor) {
      editor.on('init', function () {
        // ASP.NET需用ClientID获取真实DOM ID
        var content = $('#<%= txtEditorContent.ClientID %>').val();
        editor.setContent(content);
      });
    }
  });
});

2. 强制手动设置编辑器内容

如果模态框不是Bootstrap，或者上述方法无效，可以在TinyMCE初始化时，通过setup钩子在编辑器就绪后手动把textarea内容赋值给它，绕过Firefox的隐藏元素读取限制：

tinymce.init({
  selector: '.editor-content',
  // 保留原有配置...
  setup: function (editor) {
    editor.on('init', function () {
      // 若设置了ClientIDMode="Static"，可直接用#txtEditorContent
      var textareaContent = $('#<%= txtEditorContent.ClientID %>').val();
      editor.setContent(textareaContent);
    });
  }
});

3. 给DOM清理添加延迟

虽然tinymce.remove()官方标注为同步操作，但Firefox下可能存在DOM清理延迟，可通过setTimeout给DOM留足更新时间：

$(function () {
  tinymce.remove();
  // 延迟100ms确保DOM清理完成
  setTimeout(function () {
    tinymce.init({
      // 你的配置...
      setup: function (editor) {
        editor.on('init', function () {
          editor.setContent($('#<%= txtEditorContent.ClientID %>').val());
        });
      }
    });
  }, 100);
});