轻量级富文本编辑器quill editor结合iview的使用

Posted 2023-04-27

参考技术A vue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。 因此，在富文本编辑的过程中，对于图片的处理，我们更合理的做法是将图片上传到服务器，再将得到的图片链接插入到富文本中，以达到最优的体验。

首先安装quill editor       npm install vue-quill-editor --save

全局挂载  

在main.js中引用

使用

在需要用到富文本的vue中引用和配置quill editor工具栏

在editorOption中的handlers事件中处理图片上传（配置中的handlers是用来定义自定义程序的）

iview自带的upload上传自带三个函数

在methods里面处理一下图片

如果有错误，欢迎大家多提提意见~

vue-quill-editor富文本编辑器

在工作中肯定会遇到使用富文本编辑器的时候

接下来我们就来一起学习一下 vue-quill-editor

注: 本项目是在vue的脚手架中搭建

1.下载

npm install vue-quill-editor --save

2.配置

1)在main.js中引入

import vueQuillEditor from ‘vue-quill-editor‘ // 引入富文本工具

2)在main.js中使用

Vue.use(vueQuillEditor)

3.创建vue文件

1)在页面添加quill-editor元素

<template>
  <div>
    <quill-editor>

    </quill-editor>
  </div>
</template>

2) 在项目中显示, 引入他

  import vueQuillEditor from ‘./vueQuillEditor.vue‘

components: {
      ‘v-vueQuillEditor‘: vueQuillEditor
    }

<v-vueQuillEditor></v-vueQuillEditor>

你也可为他添加css样式

4)想要获取输入的内容你可以绑定v-model 在加上个change时间

<quill-editor 
  class="quill" 
  v-model="progs" 
  @change="change">

</quill-editor>

5) 在js中这样写

export default {
      data() {
        return{
            progs: ‘‘
        }
      },
      methods: {
          ssss: function () {
            console.log(this.progs)
          }
      }
  }

5) 这已经就可以使用了 简不简单

在使用的过程中我还遇到了图片上传的问题 和 汉化的问题 稍后我会吧代码上传