将wangEditor当成组件用

wangEditor是一个轻量级的Web富文本编辑器，它可以通过简单的配置和调用就可以实现在线文本编辑功能。如果你想要将wangEditor当成一个组件使用，通常是指在Web项目中将wangEditor嵌入到你的页面中，并且与你的前端框架（如React, Vue或Angular）集成。

在将wangEditor作为组件使用时，通常需要遵循以下步骤：

1. 引入wangEditor：将wangEditor的JavaScript和CSS文件引入到你的HTML页面中。如果是基于模块化的前端框架，可以通过npm或yarn安装对应的包然后import导入。

2. 初始化编辑器：在你的JavaScript代码中，创建一个编辑器实例，并将它绑定到页面的某个DOM元素上。

3. 配置编辑器：根据需要配置编辑器的选项，比如上传图片的配置、菜单栏的配置、工具栏的配置等。

4. 使用编辑器：初始化完成后，用户就可以在编辑器中输入文本，使用各种功能了。

5. 获取编辑器内容：可以通过API获取编辑器中的内容，进行后续处理，如保存到数据库等。

以React为例，将wangEditor作为组件使用可能的代码示例：

import React, { useRef, useEffect } from 'react';
import E from '@wangeditor/editor';

const WangEditorComponent = ({ content, setContent }) => {
  const editorRef = useRef(null);

  useEffect(() => {
    // 创建编辑器
    const editor = new E(editorRef.current);
    // 初始化编辑器内容
    editor.create(content);
    // 监听内容变化事件
    editor.on('change', (html) => {
      setContent(html);
    });
    // 清理资源
    return () => {
      editor.destroy();
    };
  }, []);

  return <div ref={editorRef} style={{ height: '500px' }} />;
};

export default WangEditorComponent;

在上述代码中，我们创建了一个React组件`WangEditorComponent`，它接受初始内容`content`和更新内容的函数`setContent`作为props。使用`useEffect`钩子在组件挂载后初始化编辑器，并在组件卸载时清理资源。