记一次KindEditor表格修改无效问题

站长

2023年02月21日 20:37 · 阅读数 16

项目说明

项目是由UmiJS创建的(React+Ant Design4.2)，项目需求是富文本编辑器录入多样内容，可供查看。

通过各方探索以及客户的沟通，选定了KindEditor编辑器，通过iframe嵌入。但仍有很多不符合要求的地方，所以要进行很多魔改。

同时伴随着客户的使用体验，针对问题进行修复。

起因及详细说明

客户提出一个问题：表格整体由居左修改为居中后，点击保存，在显示区域里仍是居左，修改无效。

项目页面中，编辑器所在位置是一个弹窗里，编辑器通过子组件里iframe嵌入，通信是props和postMessage/onMessage

// 父页面
<Modal onOk={handleOk}>
  ...
  <KindEditor 
  initValue={initValue}
  setContent={setValueList}
  ></KindEditor>
  ...
</Modal>
const handleOk = () =>{
  // 参数校验
  // 接口请求
}
// 子组件
const KindEditor = (props) =>{
  ...
  const setContent = props.setContent;
  window.onmessage = (e)=>{
    setContent(e.data)
  }
  useEffect(()=>{
    ...
    editorDOM.contentWindow.postMessage(
      { initValue: props.initValue }
    );
    ...
  },[props.initValue])

}

探查原因

编辑器问题

由于之前客户有提出过文字选中内容加粗偶尔无效问题，而且我在测试环境点击操作几次后，发现表格修改后保存是成功的，所以这一次最初怀疑是编辑器功能不稳定。

但细想下又觉得不对，加粗偶尔失效是在编辑器内操作时候内容文字效果就没有变成加粗效果，而这次对表格修改之后确实是成为了居中。

只是保存之后再查看时候还是和没修改一样，所以应该不是编辑器功能不稳定。

当在本地把代码运行后，在本地环境中终于复现了该问题。

经过几次操作的对比测试，发现有两种情况下结果不同：

修改完之后，马上点击提交，结果是不成功的
修改完之后，稍等一会儿，做下其他操作(比如:点击下页面或者滑动下滚动条...)，点击提交按钮，结果是成功的。

所以觉得是编辑器通过postMessage/onMessage传值因为网速问题导致传值速度慢，所以在提交按钮中触发方法handleOk中加了延时，

// 参数校验
...js
setTimout(()=>{
  // loading处理和接口请求
  ...
},1000)

延时结束后再进行接口请求。

但从1秒改到5秒，修改后立刻点击按钮，结果仍是不成功。这就很奇怪了

又在编辑器传值onMessage方法和页面中获取valueList位置加了log输出，发现log输出为新值，接口请求传参仍为旧值。

所以开始怀疑是setState异步问题

setState异步问题

自己对react学习了解不深，尝试半小时之后，仍没有解决，所以请同事reac大佬帮忙查看定位。

监听定位

先对valueList进行监听，确认已经是得到了编辑器传来的最新的值，

同时对接口请求之前对valueList进行log输出，为未修改的值。

useCallback

经过上一步，确定了编辑器传值确实是没有问题，那么问题的解决就在于如何在接口请求时获取到最新的值。

根据react官方文档，使用useCallback钩子进行处理。

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新

const handleOk = useCallback(()=>{
  handleOkBtn()
},[valueList])

感觉应该是valueList变化之后才会执行回调函数

但测试之后输出效果与之前相同，同时临近下班，且大佬手头还有工作，就暂时搁置。

编辑器change事件

由于问题未解决，所以周一向组长说明问题内容进行deBug，大佬也帮忙写了demo。

结果说明了可能是setState的问题，但代码的写法是没有错。

之前加了许多log输出，但因为其他页面输出log也很多，之前测试没有加统一标识进行过滤，所以这次的测试，对于问题相关的输出加了统一标识前缀。

经过测试，发现点击提交按钮的log输出是在编辑器返回数据之前，这个顺序是不对的。提交方法获取值的时候是旧的，获取完毕之后valueList才拿到新值进行修改。

根据输出信息的输出顺序，发现了一个异常：在表格属性修改后是没有触发编辑器的change事件，而在点击按钮或者点击页面其他地方时才会触发change事件，输出内容。

所以，如果在表格修改后触发change事件，将最新的值传到父组件，那么在提交时获取的一定会是最新的值。

源码修改

经过上述的探索步骤，修改源码成了唯一的选择。

根据表格属性修改弹窗的内容和css样式，找到了源代码中弹窗内容的位置(在8800行左右)，弹窗确定按钮的方法实现在8830行左右。

在确定按钮的方法实现中debugger一步步调试加log输出，确定了要修改的位置。

// 修改前
self.hideDialog().focus();
self.cmd.range.moveToBookmark(bookmark);
self.cmd.select();
self.addBookmark();
return;
// 修改后
self.hideDialog().focus();
self.cmd.range.moveToBookmark(bookmark);
self.cmd.select();
self.addBookmark();
// 添加change事件触发，保证表格修改后可以获取最新的值
if (self.options.afterChange) {
    self.options.afterChange.call(self);
}
return;

加上了触发change事件的内容后，测试结果是成功的。

由此，在测试了其他表格修改操作后，给单元格属性的修改方法实现也添加了触发change事件的内容。

问题解决，大吉大利，天下太平。