wangEditor
wangEditor copied to clipboard
Published
20 hours ago •
wangeditor-team
wangeditor-team
使用wangeditor报错getBoundingClientRect
问题描述
在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 (
<div>
<button onClick={goToLogin}>Login</button>
<button onClick={goToEditor}>Editor</button>
</div>
)
}
// Login组件
import React from 'react'
export default function Login() {
return (
<div>
我是登录界面
</div>
)
}
// 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:<Login/>
},
{
path:'/editor',
element:<MyEditor/>
},
{
path:'*',
element:<Login/>
},
])
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(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// 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 (
<div className="App">
<Header></Header>
<Menu></Menu>
</div>
);
}
export default App;
3.启动项目
npm start
- 步骤三
点击上面的login和Editor按钮切换界面，在控制台发现报错Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
如果是 chrome 浏览器 content.js 报错 Cannot read properties of null (reading 'getBoundingClientRect') 的话应该是 chrome 的扩展程序跟这个富文本有冲突，一个一个关一下试试，跟代码无关.
如果是 chrome 浏览器 content.js 报错 Cannot read properties of null (reading 'getBoundingClientRect') 的话应该是 chrome 的扩展程序跟这个富文本有冲突，一个一个关一下试试，跟代码无关.
我是 gpt的插件导致 关掉插件无报错
如果是 chrome 浏览器 content.js 报错 Cannot read properties of null (reading 'getBoundingClientRect') 的话应该是 chrome 的扩展程序跟这个富文本有冲突，一个一个关一下试试，跟代码无关.
我是 gpt的插件导致 关掉插件无报错
感谢大佬的指点，确实是这个原因，把gpt插件关掉就好了
