react wangEditor v5 文字飘红问题

[CeliaChangChang]

react 封装wangEditor在表单里面使用，但是输入内容就出现飘红的下划线是为什么呢？

是本身就存在这个问题，还是我封装有问题，还麻烦看看

import '@wangeditor/editor/dist/css/style.css' // 引入 css import React, { useState, useEffect, useRef } from 'react' import { Editor, Toolbar } from '@wangeditor/editor-for-react' import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'

interface FormItemProps { value?: string; onChange?: (value?: IDomEditor) => void; readonly?: boolean; //只读 }

const WangEditor: React.FC<FormItemProps> = ({ value, onChange, readonly }) => { // editor 实例 const [editor, setEditor] = useState<IDomEditor | null>(null) // TS 语法 const editorRef = useRef(null)

const handleChange = (editor: any) => {
    onChange?.(editor.getHtml())
}
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {

}

// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {    // TS 语法
    placeholder: '请输入内容...',
    readOnly: readonly,
}

//及时销毁 editor ，重要！
useEffect(() => {
    return () => {
        if (editor == null) return
        editor.destroy()
        setEditor(null)
    }
}, [editor])

return (
    <>
        <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
            <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                mode="simple"
                style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
                defaultConfig={editorConfig}
                value={value}
                onCreated={setEditor}
                onChange={editor => handleChange(editor)}
                mode="simple"
                style={{ height: '600px', overflowY: 'hidden' }}
            />
        </div>
    </>
)

}

export default WangEditor

你预期的样子是？

请输入内容……

系统和浏览器及版本号

• 操作系统
• 浏览器和版本

wangEditor 版本

请输入内容……

demo 能否复现该 bug ？

能/不能

• 中文 demo https://www.wangeditor.com/demo/
• English demo https://www.wangeditor.com/demo/?lang=en

在线 demo

请尽量提供在线 demo （推荐以下网站），帮助我们最低成本复现 bug

• https://codesandbox.io/
• https://codepen.io/
• https://stackblitz.com/

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一
• 步骤二
• 步骤三

[wang1057296609]

我也遇到这样的问题，麻烦尽快解决

[QKflame]

我也遇到了相同问题

[wang1057296609]

已经解决该问题，是因为富文本框默认开启了检查拼音属性，设置关闭即可 // 禁止拼音检查，导致出现红色波浪线 const div = document.querySelector('.w-e-scroll div') if (div) { div.spellcheck = false }