在React中显示TinyMCE内容

npm install tinymce

import React, { useEffect } from 'react';
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver'; // 导入主题
import 'tinymce/plugins/paste'; // 导入插件

const EditorComponent = () => {
  useEffect(() => {
    tinymce.init({
      selector: '#my-editor',
      plugins: ['paste'],
      toolbar: 'paste',
      height: 500,
      // 其他配置项...
    });
  }, []);

  return (
    <div>
      <textarea id="my-editor" />
    </div>
  );
};

export default EditorComponent;

import React, { useEffect, useRef } from 'react';
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';

const EditorComponent = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    tinymce.init({
      selector: '#my-editor',
      plugins: ['paste'],
      toolbar: 'paste',
      height: 500,
      // 其他配置项...
      setup: (editor) => {
        editorRef.current = editor;
      },
    });
  }, []);

  const setContent = () => {
    if (editorRef.current) {
      editorRef.current.setContent('<p>This is the content to be displayed in TinyMCE.</p>');
    }
  };

  return (
    <div>
      <textarea id="my-editor" />
      <button onClick={setContent}>Set Content</button>
    </div>
  );
};

export default EditorComponent;