vue-quill-editor的详细配置与使用

Posted 2023-04-27

参考技术A 最近工作中需求使用一款富文本编辑器，经过再三比较选择了vue-quill-editor，之所以选择vue-quill-editor，是看上了它的轻量以及外观简洁的优势。打开官方文档，直接上手配置，各种报错，踩了很多坑，遇到的主要问题有以下几个

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) 这已经就可以使用了 简不简单

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