vue3 wangeditor setup

在 Vue 3 中使用 WangEditor 需要经过以下步骤进行设置：

1. 安装 WangEditor：在项目根目录下打开终端，执行以下命令安装 WangEditor 包：

   npm install wangeditor --save

2. 在需要使用 WangEditor 的组件中引入 WangEditor 的样式文件和脚本文件。可以在组件的 `<script>` 标签中使用 `import` 引入，或者直接在 HTML 页面中使用 `<script>` 标签引入。

3. 在 Vue 组件中创建一个 `mounted` 钩子函数，然后在该函数中初始化 WangEditor 实例。例如：

   <template>
     <div>
       <div ref="editorElem"></div>
     </div>
   </template>

   <script>
   import WangEditor from 'wangeditor'

   export default {
     mounted() {
       const editor = new WangEditor(this.$refs.editorElem)
       editor.create()
     }
   }
   </script>

4. 在模板中使用 `<div ref="editorElem"></div>` 创建一个容器元素，用于承载编辑器的内容。

5. 可以根据需要配置编辑器的样式、工具栏按钮以及其他功能。具体的配置项和方法可以参考 WangEditor 的官方文档。

这样就完成了在 Vue 3 中使用 WangEditor 的设置。您可以根据项目需求进一步调整和定制编辑器的功能和样式。希望对您有所帮助！如果您还有其他问题，请随时提问。