vue wangeditor使用

Vue Wangeditor是一个基于百度编辑器（WangEditor）的轻量级富文本编辑器插件，它将WangEditor的功能封装成了Vue组件的形式，非常适合在Vue.js项目中集成富文本编辑功能。以下是使用Vue Wangeditor的基本步骤：

1. **安装**:
使用npm或yarn添加依赖：

   npm install vue-wangeditor --save
   或者
   yarn add vue-wangeditor

2. **引入并注册组件**:
在`main.js`或其他入口文件中导入，并在Vue实例中使用：

   import VueWangEditor from 'vue-wangeditor'
   import 'wangeditor/dist/css/wangEditor.css'

   Vue.component('editor', VueWangEditor)

3. **在模板中使用**:

   <template>
     <div>
       <editor :config="editorConfig"></editor>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         editorConfig: {
           // 配置项，如主题、工具栏等
           toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', '|', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'insertImage', 'uploadFile'],
         }
       }
     }
   }
   </script>

4. **配置项自定义**:
可以根据需要调整`editorConfig`对象中的选项。

5. **事件处理**:
Vue Wangeditor提供了许多事件，例如`onchange`、`onblur`等，你可以监听这些事件以获取编辑内容的变化。