南京做网站dmooo,深圳网站订制开发,网站 改版 建议,wordpress 本地打开很慢使用的富文本是编辑器 react-quill
需求#xff1a;
点击按钮插入自定义颜色文字#xff0c;然后手动输入为正常颜色。
问题#xff1a;
quill组件把带颜色的字体创建个dom, 临近的文字都会整合进一个dom中#xff0c;导致输入的文字和插入的带颜色 都统一成一个颜色了…使用的富文本是编辑器 react-quill
需求
点击按钮插入自定义颜色文字然后手动输入为正常颜色。
问题
quill组件把带颜色的字体创建个dom, 临近的文字都会整合进一个dom中导致输入的文字和插入的带颜色 都统一成一个颜色了。
中文输入拼音阶段就开始触发change事件在转换文本时会把拼音和汉字混杂出现结果不正确。
解决方案
绑定compositionstartcompositionend 事件可监听到非直接输入的输入法输入状态结束时机准确。
设置个状态通过判断状态区分 中/英文输入法区别正确处理逻辑。
// 设置个状态表示当前是否是非直接输入法输入(如中文有拼音阶段)
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()}
}
