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

矫情吗；* 2024-04-18 06:25 50阅读 0赞

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

被这个困扰了一整天，查了各种资料都不行，最后还是avue文档中实现了这个效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
步骤：  
1.安装插件：在当前文件目录下命令行输入：npm install avue-plugin-ueditor --save  
![在这里插入图片描述][20190903145551203.png]  
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);
     },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a2fa726da29248bbbbd0a7210da65995.png
[20190903145551203.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/de77599275454027b3102a153a5a5796.png