avue框架中使用富文本编辑器

avue框架中使用富文本编辑器

被这个困扰了一整天，查了各种资料都不行，最后还是avue文档中实现了这个效果

步骤：
1.安装插件：在当前文件目录下命令行输入：npm install avue-plugin-ueditor --save

2.在main.js中引入插件：

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor);

3.组件使用：

export default {
        data() {            
                text: '',
                upload: {
                  //普通图片上传
                  action: "https://avueupload.91eic.com/upload/list",
                  props: {
                    res: "data.0",
                    url: "url"
                  },
                  //七牛云oss配置
                  qiniu: {
                    AK: "",
                    SK: "",
                    scope: "test",
                    url: "http://pm7cc17lu.bkt.clouddn.com/",
                    deadline: 1
                  },
                  //阿里云oss配置
                  ali: {
                    region: "oss-cn-beijing",
                    endpoint: "oss-cn-beijing.aliyuncs.com",
                    accessKeyId: "",
                    accessKeySecret: "",
                    bucket: "avue"
                  }
        }
}

在做保存事件是要将富文本的内容nr.textContent单独添加进对象中；
修改事件时，要将数据库中保存的内容再转化为富文本框的显示内容；
methods：

handleSave: function (row, done,loading) {//保存
              var nr=document.getElementById("nr")
              row.nr=nr.textContent.trim();//.trim()去掉首尾的空格
              addObj(row).then(data => {
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    })
                    done()
                    this.getList(this.page)
                    this.$refs.crud.toggleSelection();
                }).catch(() => {
                    loading();
                });
 },
 handleEdit (row, index) {//修改
              this.text=row.nr;
              this.$refs.crud.rowEdit(row, index);
 },