无锡锡山网站建设,网站开发(源代码),全网营销培训公司,vue做的网站多么项目说明
项目是由UmiJS创建的(ReactAnt Design4.2)#xff0c;项目需求是富文本编辑器录入多样内容#xff0c;可供查看。
通过各方探索以及客户的沟通#xff0c;选定了KindEditor编辑器#xff0c;通过iframe嵌入。但仍有很多不符合要求的地方#xff0c;所以要进行很…项目说明
项目是由UmiJS创建的(ReactAnt 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中加了延时
// 参数校验
...
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事件的内容。
问题解决大吉大利天下太平。
