如何在reactjs中使用TinyMce编辑器填充或编辑HTML内容

Question

我使用 TinyMce React 编辑器允许用户创建、编辑和保存来自数据库的内容。然而，曾经。我在将数据库中的 HTML 内容解析回编辑器时遇到了挑战。

根据 TinyMCE 文档，我使用了 React 中的

useRef 

来保存编辑器的初始化，然后使用当前的

getContent

来工作，它会返回用户输入的内容。但是，使用

useRef.current.setContent(myDatabaseContent)

.

但是我收到错误，

cannot read properties of null (reading setContent)

谁使用过 TinyMCE？您是如何使用它来编辑内容的？或者你是如何将内容加载回编辑器的？

Answer 1

将 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;