react-quill富文本中文输入法触发change问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了react-quill富文本中文输入法触发change问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

需求：

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

问题：

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

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

解决方案：

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

设置个状态，通过判断状态区分中/英文输入法区别，正确处理逻辑。文章来源地址https://www.toymoban.com/news/detail-704791.html

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

}, [])
const editorChange = () => {
    // 直接输入法输入(英文，可直接输入)
    if (!editorIsChineseStatus) {
        // 处理英文输入逻辑
        todo2()
    }
}

到了这里，关于react-quill富文本中文输入法触发change问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！