使用wangeditor报错getBoundingClientRect

ZHCLN commented 1 year ago

问题描述

在react18.2.0中使用wangeditor报错Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect'))

wangEditor 版本

"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-react": "^1.0.6"

是否查阅了文档？

（文档链接 www.wangeditor.com ）

是

最小成本的复现步骤

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

步骤一

1.创建一个空的react项目
npx create-react-app test
2.安装react-router-dom
"react-router-dom": "^6.14.2"
npm install react-router-dom
3.安装wangEditor
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-react --save

步骤二


1.在src文件夹下穿件components文件夹，并在components下创建四个函数组件（Header、Login、Menu、MyEditor）
### 文件目录
src 
- components
- Header
  - Header.jsx
- Login
  - Login.jsx 
- Menu
  - Menu.jsx
- MyEditor
  - MyEditor.jsx
// Header组件
import React from 'react'
import { useNavigate } from 'react-router-dom'

export default function Header() { const navigate = useNavigate(); const goToLogin=()=>{ navigate('/login') } const goToEditor=()=>{ navigate('/editor') } return (

} // Login组件 import React from 'react'

export default function Login() { return (

我是登录界面

) } // Menu组件 import React from 'react' import { useRoutes } from 'react-router-dom' import Login from '../Login/Login'; import MyEditor from '../MyEditor/MyEditor';

export default function Menu() { const element = useRoutes([ { path:'/login', element: }, { path:'/editor', element: }, { path:'*', element: }, ])

return element;

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

export default function MyEditor() { const [editor, setEditor] = useState(null) // 编辑器内容 const [html, setHtml] = useState('') // 模拟 ajax 请求，异步设置html useEffect(() => { setTimeout(() => { setHtml('') }, 1500) }, []) // 工具栏配置 const toolbarConfig = {

}
// 编辑器配置
const editorConfig = {                         // JS 语法
    //编辑器配置，可以设置编辑框的大小,是否支持滚动，选中之后弹出的菜单项
    placeholder: '请输入内容...',

    // 菜单配置
    // MENU_CONF: {
    //     // 上传图片配置
    //     uploadImage: {
    //         server: '/api/uploadImage',
    //         //文件名，后端接收需要用
    //         fieldName: 'image',
    //         // 单个文件的最大体积限制，默认为 2M
    //         maxFileSize: 5 * 1024 * 1024, // 1M
    //         // 最多可上传几个文件，默认为 100
    //         maxNumberOfFiles: 10,
    //         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    //         allowedFileTypes: ['image/*'],
    //         // 跨域是否传递 cookie ，默认为 false
    //         withCredentials: true,
    //         // 超时时间，默认为 10 秒
    //         timeout: 10 * 1000, // 5 秒
    //         headers:{
    //             Authorization:localStorage.getItem('jwt-token')?'Bearer '+localStorage.getItem('jwt-token'):''
    //         },
    //         //各个阶段的回调函数
    //         // 上传之前触发
    //         onBeforeUpload(file) {
    //             // file 选中的文件，格式如 { key: file }
    //             return file
    //             // 可以 return
    //             // 1. return file 或者 new 一个 file ，接下来将上传
    //             // 2. return false ，不上传这个 file
    //         },
    //         // 上传进度的回调函数
    //         onProgress(progress) {
    //             // progress 是 0-100 的数字
    //             console.log('progress', progress)
    //         },
    //         // 单个文件上传成功之后
    //         onSuccess(file, res) {
    //             console.log(`${file.name} 上传成功`, res)
    //         },
    //         // 单个文件上传失败
    //         onFailed(file, res) {
    //             console.log(`${file.name} 上传失败`, res)
    //         },
    //         // 上传错误，或者触发 timeout 超时
    //         onError(file, err, res) {
    //             console.log(`${file.name} 上传出错`, err, res)
    //         },
    //     }
    // }
}
// 及时销毁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="default"
                style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
                defaultConfig={editorConfig}
                value={html}
                onCreated={setEditor}
                onChange={editor => setHtml(editor.getHtml())}
                mode="default"
                style={{ height: '500px', overflowY: 'hidden' }}
            />
        </div>
        <div style={{ marginTop: '15px' }}>
            {html}
        </div>
    </>
)

} 2.修改入口文件index,js和app.js // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom' import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(

); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); // app.js import Menu from './components/Menu/Menu' import Header from './components/Header/Header'; import './App.css'; function App() { return (

); } export default App; 3.启动项目 npm start ``` - 步骤三 ``` 点击上面的login和Editor按钮切换界面，在控制台发现报错Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect') ```

voidjay commented 1 year ago

我也遇到了，主要是切换tab会出现这个问题

ZHCLN commented 1 year ago

我也遇到了，主要是切换tab会出现这个问题

找到解决的办法了吗

leexl25 commented 1 year ago

如何解决，遇到了

ZHCLN commented 1 year ago

如何解决，遇到了

放弃了，我用了别的富文本编辑器

1l2y3l commented 1 year ago

如果是 chrome 浏览器 content.js 报错 Cannot read properties of null (reading 'getBoundingClientRect') 的话应该是 chrome 的扩展程序跟这个富文本有冲突，一个一个关一下试试，跟代码无关.

221022 commented 1 year ago

如果是 chrome 浏览器 content.js 报错 Cannot read properties of null (reading 'getBoundingClientRect') 的话应该是 chrome 的扩展程序跟这个富文本有冲突，一个一个关一下试试，跟代码无关.

我是 gpt的插件导致关掉插件无报错

ZHCLN commented 1 year ago

如果是 chrome 浏览器 content.js 报错 Cannot read properties of null (reading 'getBoundingClientRect') 的话应该是 chrome 的扩展程序跟这个富文本有冲突，一个一个关一下试试，跟代码无关.

我是 gpt的插件导致关掉插件无报错

感谢大佬的指点，确实是这个原因，把gpt插件关掉就好了

zhuyuxiang567 commented 4 months ago

这谁能想到?我都不知道自己开了gpt插件,居然是这个原因

relaxmans commented 3 months ago

绝了，还真是gpt插件的事

wangeditor-team / wangEditor