uniapp小程序中使用wangeditor5

UniApp是一个基于Vue.js的跨平台应用框架，支持快速构建Web、H5、iOS、Android等多端应用。WangEditor5是一个富文本编辑器，它提供了一个强大的HTML编辑器，适合用于内容创建场景，如文章撰写、论坛回复等。

在uni-app小程序中集成WangEditor5的步骤如下：

1. **安装依赖**：首先通过npm或yarn在项目中安装wangEditor5，命令类似这样：

   npm install @wangeditor/editor --save

2. **引入组件**：在需要使用编辑器的页面的`<template>`部分导入编辑器组件：

   <view>
     <wangeditor ref="editor" :options="editorOption"></wangeditor>
   </view>

3. **配置选项**：在页面的script部分，定义编辑器的配置项`editorOption`，例如主题、高度等：

   export default {
     data() {
       return {
         editorOption: {
           mode: 'json', // 编辑模式，默认为富文本模式
           height: '400px', // 编辑器高度
           initialContent: '<p>这是初始内容</p>', // 初始加载的内容
           toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'height', 'lineheight', '|', 'link', 'emotion', 'image', 'file'] // 工具栏按钮列表
         }
       };
     },
     methods: {
        // 可能会用到的一些方法，如获取编辑器内容、提交等
        getEditorContent() {
          this.$refs.editor.getValue();
        }
      }
   }

4. **事件监听**：使用ref绑定的事件处理函数来监听编辑器的变化，比如内容改变时：

   mounted() {
     this.$refs.editor.on('change', content => {
       console.log('内容更改:', content);
     });
   }