Vue项目中使用quill富文本编辑器

最近新起了一个项目,弃用之前的UE富文本编辑器,通过调研决定使用quill,一个很简单的小插件哈,以下是我的使用经验

1. 安装

npm install vue-quill-edito
           

2. 引用注册

//引用
import 'quill/dist/quill.core.css';

import 'quill/dist/quill.snow.css';

import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor';



.......

//注册(当然 也可以注册在全局里面)
export default {
  name: 'quillEditorDemo',
  components: {
    quillEditor: quillEditor,
  },
           

3. 使用

<quill-editor
  id="myQuillEditor"
  ref="myQuillEditor"
  v-model="optNote.content.html"
  :options="editorOption"
  class="my-quill-editor"
  @focus="onEditorFocus"
  @change="onEditorChange($event)" />

.......
//富文本编辑器的配置项 optNote与editorOption
data(){
    optNote: {
        visible: false,
        title: this.$t('livePlayback.announceSet.announce'),
        maxLength: 300,
        noteId: '',
        content: {
          text: '',
          html: '',
          textLen: 0,
          hsahTtml: '',
        },
      },
      editorOption: {
        scrollingContainer: '#editorcontainer',
        placeholder: '',
        // or 'bubble'
        theme: 'snow',
        modules: {
          toolbar: {
            // 自定义工具栏 如果使用默认的话 直接toolbar为空就好
            container: [
              ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'], //引用，代码块
              [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表
              [{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
              [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
              [{ 'direction': 'rtl' }], // 文本方向
              [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
              [{ 'font': [] }], //字体
              [{ 'align': [] }], //对齐方式
              ['clean'], //清除字体样式
              ['image'] //上传图片、上传视频
            ],
          }
        }
      },
}
......
methods:{
    onEditorChange({ quill, html, text }){
        //可以在这里进行对应的操作 quill为富文本对象,html为富文本对象内内容由html标签组                    成,text为quill内容里面的所有文本内容

    }
}
           

大致使用情况就这些了,灵活运用,如果想操作富文本的内容也可以从监听函数onEditorChange内 进行对应的增删改查.博主的项目中有一条就是针对上传图片 做客宽高和体积的限制,也是当时思路卡了一段时间,关于解题思路 我准备再开一篇文章说.

 哦对~插播一条广告 招人招人招人!!!

诚邀各位有意向找工作和年后跳槽的朋友们

关于学历：本科及以上（学信网可查 严格）

关于薪资：最低14薪(普遍能拿到16薪)

关于福利：公积金缴纳全额基数的12%；转正后六险一金（试用期五险一金）；早餐茶水间提供免费牛奶面包，午餐公司提供，每天下午四点派发零食，每个月额外500餐补；双休,每个月不定期团建；公司内设有健身房和沐浴室满足同学们的健身要求。

关于职位:前端(vue为主), 后端(php),产品经理,UI设计,测试.......  诚邀各位大佬私信哈