封装一个简单好用的富文本编辑器组件

2023-09-08 07:12:29

在项目中，我们经常需要使用富文本编辑器来让用户输入格式化的文本。TinyMCE是一个流行的富文本编辑器，它功能强大，可以满足大部分需求。

然而，直接在项目中使用TinyMCE并不是很方便。我们需要对它进行封装，才能在不同的页面中轻松调用。

本文将介绍如何在项目中封装TinyMCE富文本编辑器成一个公用的富文本组件，以便在不同页面调用并实现各自需求。

步骤一：安装TinyMCE

首先，我们需要在项目中安装TinyMCE。

npm install tinymce --save

安装完成后，在项目中导入TinyMCE。

import tinymce from 'tinymce';

步骤二：创建富文本组件

接下来，我们需要创建一个富文本组件。

import React, { useRef, useEffect } from 'react';

const TinyMCE = ({ value, onChange }) => {
  const editorRef = useRef(null);

  useEffect(() => {
    tinymce.init({
      selector: editorRef.current,
      plugins: ['link', 'image', 'code'],
      toolbar: 'link image code',
      setup: (editor) => {
        editor.on('change', (e) => {
          onChange(e.target.getContent());
        });
      },
      initialValue: value,
    });
  }, []);

  return <textarea id="tinymce" ref={editorRef} />;
};

export default TinyMCE;

这个组件接受两个参数：value和onChange。value是编辑器初始值，onChange是编辑器内容发生变化时触发的回调函数。

步骤三：使用富文本组件

现在，我们可以使用这个组件了。

import TinyMCE from './TinyMCE';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <div>
      <TinyMCE
        value={value}
        onChange={(value) => setValue(value)}
      />
    </div>
  );
};

export default App;