我使用 TinyMce React 编辑器允许用户创建、编辑和保存来自数据库的内容。然而,曾经。我在将数据库中的 HTML 内容解析回编辑器时遇到了挑战。
根据 TinyMCE 文档,我使用了 React 中的
useRef
来保存编辑器的初始化,然后使用当前的 getContent
来工作,它会返回用户输入的内容。但是,使用 useRef.current.setContent(myDatabaseContent)
.
但是我收到错误,
cannot read properties of null (reading setContent)
谁使用过 TinyMCE?您是如何使用它来编辑内容的?或者你是如何将内容加载回编辑器的?
将 TinyMCE Editor 组件添加到 React 组件的 render 方法中。您可以使用 value 属性设置初始内容。
import React, { useState } from 'react';
import { Editor } from '@tinymce/tinymce-react';
function MyEditor() {
const [content, setContent] = useState('<p>Initial content</p>');
const handleEditorChange = (newContent, editor) => {
setContent(newContent);
};
return (
<Editor
initialValue={content}
apiKey="YOUR_API_KEY"
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}}
onEditorChange={handleEditorChange}
/>
);
}
export default MyEditor;