合肥市建设工程劳务分包合同备案表在哪个网站下载自己如何免费做网站

使用的富文本是编辑器 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()}
}