安装依赖
npm install vue-quill-editor -s
npm install quill-image-resize-module -s
然后全局引入
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)
在需要的组件中引入使用
import VueQuillEditor, {
Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
这里需要两个参数content/editorOption
content 是用户在文本框内输入的内容 生成的HTML标签
editorOption是富文本主体功能对象
组件中注册组件 ( 哪里需要哪里用 ) 上结构 ( 根据使用进行修改 )
<template>
<div>
<!-- @blur="onEditorBlur($event)"-->
<!-- @focus="onEditorFocus($event)"-->
<!-- @ready="onEditorReady($event)"-->
<quill-editor v-model="content"
ref="quill"
:options="editorOption"
>
</quill-editor>
<el-upload
class="upload-demo"
action="#"
:http-request="uploadFile"
:show-file-list="false"
style="display:none"
ref="upload"
>
<el-button id="imgInput" type="primary">点击上传</el-button>
</el-upload>
<div @click="getHtml" style="text-align: right;margin-top: 10px">
<el-button size="mini" type="primary">确定</el-button>
</div>
</div>
</template>
<script>
import {
Quill,quillEditor } from 'vue-quill-editor'
import ImageResizes from 'quill-image-resize-module'
// import quillConfig from './utils/quill-config'
//设置字体大小
let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
fontSizeStyle.whitelist=['12px','14px','16px','18px']
Quill.register(fontSizeStyle,true)
//设置字体样式
let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei'