欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-quill-editor富文本编辑器简单使用方法

程序员文章站 2022-06-29 22:49:48
文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用,具体操作步骤如下: 安装: npm install vue-quill-edito...

文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用,具体操作步骤如下:

安装:

npm install vue-quill-editor --save

main.js:

import vuequilleditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

在需要使用的地方:

<template>
   <quill-editor 
   v-model="content" 
   ref="myquilleditor" 
   :options="editoroption" 
   @blur="oneditorblur($event)" 
   @focus="oneditorfocus($event)"
   @change="oneditorchange($event)">
  </quill-editor>
</template> 
<script>
  import { quilleditor } from 'vue-quill-editor'
  export default{
    data(){
      return {
        content:null,
        editoroption:{}  //配置
      }
    },
    methods:{
      oneditorblur(){//失去焦点事件
      },
      oneditorfocus(){//获得焦点事件
      },
      oneditorchange(){//内容改变事件
      }
    }
  }
</script>  

看到了一个网友分享的如何禁用vue-quill-editor 富文本编辑器,分享给大家,也谢谢原作者的分享。

vue:

<el-form-item label="描述:" :label-width="formlabelwidth">
  <quill-editor
   v-model="form.content"
   ref="content"
   :options="editoroption"
   @blur="oneditorblur($event)" 
   @focus="oneditorfocus($event)"
   @change="oncontentchange($event)"
   @ready="oneditorready($event)">
  </quill-editor>
</el-form-item>

js:

export default {
  data() {
    form: {
      content:'', // 存储富文本框内容
    },
    editoroption: { // 定义富文本编辑器显示
      modules:{
      toolbar:[
       ['bold','italic','underline','strike'], // 加粗、倾斜、下划线、删除线

       [{'header':1},{'header':2}], // 标题一、标题二
       [{'list':'ordered'},{'list':'bullet'}], // 列表

       [{'color':[]},{'background':[]}], // 字体颜色、背景颜色
      ]
     }
    }
  },
  methods: {
    oneditorready(){ // 富文本准备时的事件

    },
    oneditorfocus(val,editor){ // 富文本获得焦点时的事件
      console.log(val); // 富文本获得焦点时的内容
      editor.enable(false); // 在获取焦点的时候禁用
    },
    oneditorblur(val){ // 富文本失去焦点时的事件
      console.log(val); // 富文本失去焦点时的内容
    },
    oncontentchange(val){ // 富文本内容改变时的事件
      console.log(val); // 富文本改变时的内容
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。