Vue3.0 中使用 wangEditor 富文本编辑器

当使用Vue 3.0版本时，wangEditor的使用方法略有不同。以下是在Vue 3.0中使用wangEditor富文本编辑器的示例代码：

```

<template>

 <div>

   <div ref="editorContainer"></div>

   <button @click="saveContent">保存</button>

 </div>

</template>

<script>

import { ref, onMounted } from 'vue';

import WangEditor from 'wangeditor';

export default {

 setup() {

   const editorContainer = ref(null);

   onMounted(() => {

     const editor = new WangEditor(editorContainer.value);

     editor.create();

   });

   const saveContent = () => {

     const editor = WangEditor.getEditor(editorContainer.value);

     const content = editor.txt.html();

     // 处理保存逻辑，可以将content发送到服务器或者进行其他操作

     console.log(content);

   };

   return {

     editorContainer,

     saveContent

   };

 }

};

</script>

```

在这个示例中，使用了Vue 3.0的Composition API来编写组件。通过ref函数创建了一个响应式的editorContainer引用，用于获取编辑器的容器元素。

在onMounted钩子函数中，创建了wangEditor实例，并将其绑定到editorContainer.value上。这里使用.value来访问ref对象的值。

在saveContent函数中，通过WangEditor.getEditor()方法获取编辑器实例，并使用editor.txt.html()获取编辑器中的内容。可以根据需要自行处理保存逻辑。

确保在项目中正确安装了wangEditor，并在使用前进行了引入。