vue-quill-editor 富文本详细使用

Vue 富文本

首先上图

第一步 安装依赖

npm install vue-quill-editor –save
npm install quill --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'
Vue.use(VueQuillEditor)

第三步 重启Vue项目

第四步 vue 页面使用

<quill-editor	
            v-model="articleForm.text"
            :options="editorOption"
            ref="myQuillEditor"
            style="height:300px;"
            @change="onEditorChange($event)"
          >
 </quill-editor>

options : 这个是富文本功能 可写可不写 有默认 具体信息下边会说明
@change=“onEditorChange($event)” 这个是内容发送改变事件

<script></script> 里面引入

//富文本
import { Quill } from 'vue-quill-editor'

:options="editorOption"

	  //富文本编辑器
      editorOption: {
        placeholder: '请输入文章内容...',
        modules: {
          toolbar: [ 
            [{ 'color': [] }, { 'background': [] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{'size': ['small', false, 'large']}],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            ['link', 'image'],
            [{ 'align': [] }],
          ]
        }
    }

toolbar : 每一个数组 是一个功能这里不全 百度找即可

说一下插件 这里图片上传之后 大小不能改变很麻烦
所以使用插件
//图片大小
npm install quill-image-resize-module --save

vue页面引入

import ImageResize from ‘quill-image-resize-module’
Quill.register(‘modules/imageResize’, ImageResize)

//图片拉入 或者粘贴
npm install quill-image-drop-module --save

vue页面引入

import { ImageDrop } from ‘quill-image-drop-module’
Quill.register(‘modules/imageDrop’, ImageDrop)