Vue3 + TypeScript 环境下安装使用 WangEditor 富文本编辑器

在 Vue3 + TypeScript 项目中安装和使用 WangEditor 富文本编辑器，需要按照以下步骤进行操作：

1. 安装 WangEditor
   首先，确保你的项目已经安装了 Node.js 和 npm（Node 包管理器）。然后，在项目根目录下打开终端或命令提示符，执行以下命令来安装 WangEditor：

   yarn add @wangeditor/editor@5.1.14 @wangeditor/editor-for-vue@5.1.12

   这将使用 npm 或 yarn 将 WangEditor 及其 Vue 组件添加到你的项目中。
2. 导入 WangEditor
   在你的 Vue3 + TypeScript 项目中，打开需要使用 WangEditor 的组件文件，然后导入 WangEditor 和相关样式。例如，在 .vue 文件中：

   <script lang="ts" setup>
   import { ref, onBeforeUnmount } from 'vue';
   import '@wangeditor/editor/dist/css/style.css';
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
   const toolbarConfig: Partial<IToolbarConfig> = {}; // 可根据需求自定义编辑器上的菜单栏、功能和顺序等
   const editorConfig: Partial<IEditorConfig> = {
   placeholder: "你好呀", // 可自定义编辑器的占位符内容
   readOnly: false, // 控制编辑器是否只读，默认为 false
   autoFocus: false, // 控制编辑器是否自动获取焦点，默认为 true
   scroll: false, // 控制编辑器是否支持滚动，默认为 true
   };
   </script>

3. 创建 WangEditor 实例并挂载到页面上
   在导入 WangEditor 后，你可以在 Vue 组件的模板部分创建一个 WangEditor 实例，并将其挂载到页面上的指定位置。例如：

   <template>
   <div>
   <div ref="editorContainer" style="width: 100%; height: 500px;"></div>
   </div>
   </template>

   然后，在组件的脚本部分使用 ref 和 onBeforeUnmount 钩子函数来创建和销毁 WangEditor 实例。例如：

   <script lang="ts" setup>
   import { ref, onBeforeUnmount } from 'vue';
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
   // ...（导入和配置代码）...
   </script>

4. 使用 WangEditor 的 API 和事件回调函数
   WangEditor 提供了一系列 API 和事件回调函数，以便你能够控制编辑器的行为并处理编辑器内容的变化。你可以在 setup 函数中调用这些 API 并监听事件回调函数。例如：

   <script lang="ts" setup>
   import { ref, onBeforeUnmount } from 'vue';
   import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
   // ...（导入和配置代码）...
   </script>