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

问题描述 投票:0回答:1

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

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

useRef 
来保存编辑器的初始化,然后使用当前的
getContent
来工作,它会返回用户输入的内容。但是,使用
useRef.current.setContent(myDatabaseContent)
.

但是我收到错误,

cannot read properties of null (reading setContent)

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

reactjs tinymce edit blogs
1个回答
0
投票

将 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;
© www.soinside.com 2019 - 2024. All rights reserved.