CuteSoft富文本编辑器在Firefox模态窗口中报错失效求助

问题情况 #

• 富文本编辑器在Chrome、Edge中正常运行，但在Firefox的模态窗口里报错：iw._ is undefined
• 仅Firefox模态窗口内失效，普通页面窗口运行正常

问题原因 #

第三方编辑器的rte.js第209行存在逻辑漏洞：只检查了对象是否为null，没校验数组a是否为null。这类空值校验问题在库中多处存在，直接修改第三方库源码维护成本高。

无需修改第三方库的解决方案 #

方案1：延迟编辑器初始化 #

利用Bootstrap模态窗口的shown.bs.modal事件，等模态窗口完全显示后再初始化编辑器，规避Firefox环境差异问题。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <!-- 提前加载编辑器资源，避免模态内加载时序问题 -->
  <link rel="stylesheet" href="richtexteditor/rte_theme_default.css" />
  <script type="text/javascript" src="richtexteditor/rte.js"></script>
  <script type="text/javascript" src="richtexteditor/plugins/all_plugins.js"></script>
</head>

<body>

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <textarea id="inp_editor1">
            <div>
              <div>
                <p style="margin-top:0pt; margin-bottom:9pt; widows:0; orphans:0; font-size:9pt">
                  <span style="font-family:'Times New Roman'">es una prueba</span>
                </p>
                <p style="margin-top:9pt; margin-bottom:9pt; widows:0; orphans:0; font-size:9pt">
                  <img src="http://localhost:8080/t.001.jpeg" width="198" height="120" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
                  <img src="http://localhost:8080/t.002.jpeg" width="152" height="208" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
                  <img src="http://localhost:8080/t.003.jpeg" width="480" height="360" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
                </p>
              </div>
            </div>
         </textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    let editor1;
    // 模态窗口完全显示后初始化编辑器
    $('#exampleModal').on('shown.bs.modal', function () {
      const editor1cfg = {
        toolbar: "mytoolbar",
        toolbar_mytoolbar: "{bold,italic,underline,forecolor,backcolor}|{justifyleft,justifycenter,justifyright,justifyfull}|{insertorderedlist,insertunorderedlist,indent,outdent,insertblockquote}" +
          " \#{paragraphs:toggle,fontname:toggle,fontsize:toggle,inlinestyle,lineheight}" +
          " / {removeformat,cut,copy,paste,delete,find}|{inserttable,insertimage,selectall}" +
          "\#{toggleborder,fullscreenenter,fullscreenexit,undo,redo,togglemore}"
      };
      editor1 = new RichTextEditor("#inp_editor1", editor1cfg, { editorResizeMode: "both" });
    });

    // 模态关闭时销毁编辑器，避免重复初始化
    $('#exampleModal').on('hidden.bs.modal', function () {
      if(editor1) {
        editor1.destroy();
        editor1 = null;
      }
    });
  </script>
</body>

</html>

方案2：全局补全数组空值校验 #

在加载rte.js之前添加以下代码，为数组常用方法添加空值保护，避免未定义报错：

(function() {
  // 包装forEach方法，空数组直接返回
  const originalForEach = Array.prototype.forEach;
  Array.prototype.forEach = function(callback, thisArg) {
    if (!this) return;
    return originalForEach.call(this, callback, thisArg);
  };
  // 根据实际报错情况，可添加map、filter等其他数组方法的包装
})();

修改说明 #

1. 资源提前加载：将编辑器的CSS和JS移到页面头部加载，避免模态内加载的时序问题
2. 初始化时机：用shown.bs.modal事件确保模态窗口完全渲染后再初始化编辑器
3. 销毁逻辑：模态关闭时销毁编辑器，防止重复初始化引发异常

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