郑州手机网站建设多少钱网站运营总监

使用的富文本是编辑器 react-quill

需求：

点击按钮插入自定义颜色文字，然后手动输入为正常颜色。

问题：

quill组件把带颜色的字体创建个dom, 临近的文字都会整合进一个dom中，导致输入的文字和插入的带颜色 都统一成一个颜色了。

中文输入拼音阶段就开始触发change事件，在转换文本时会把拼音和汉字混杂出现，结果不正确。

解决方案：

绑定compositionstart，compositionend 事件，可监听到非直接输入的输入法输入状态，结束时机准确。

设置个状态，通过判断状态区分 中/英文输入法区别，正确处理逻辑。

// 设置个状态，表示当前是否是非直接输入法输入(如中文，有拼音阶段)
let editorIsChineseStatus = false
useEffect(() => {const editorDom = document.querySelector('.ql-editor')if (!editorDom) returneditorDom.addEventListener('compositionstart',function () {// 当前是非直接输入法输入editorIsChineseStatus = true},false)editorDom?.addEventListener('compositionend',function (e) {// 非直接输入法输入结束editorIsChineseStatus = false// 处理逻辑todo()},false)}, [])
const editorChange = () => {// 直接输入法输入(英文，可直接输入)if (!editorIsChineseStatus) {// 处理英文输入逻辑todo2()}
}