安装依赖
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','KaiTi','FangSong','Arial']
Font.whitelist = fonts //将字体加入到白名单
Quill.register(Font, true)
Quill.register('modules/imageResize', ImageResizes)
const toolbar = [
[{ 'color': [] }, { 'background': [] }],
['bold', 'italic', 'underline', 'strike'],
[{size: ['12px','14px','16px','18px']}],
['bold', 'italic'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'header': 1 }, { 'header': 2 }],
[{'list': 'ordered'}, {'list': 'bullet'}],
["image", "video"],
['blockquote', 'code-block'],
[{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],
[{ 'align': [] }],
]
export default {
name: "goodsDetail",
components:{
quillEditor
},
data(){
return{
content: null,
editorOption: {
placeholder: '请输入...',
modules: {
toolbar: {
container:toolbar,
handlers:{
// 拦截富文本上传自定义上传
// 拦截视频 ( 自行处理其他操作 )
video: function (value) {
console.log(value)
if (value){
document.getElementById("imgInput").click();
}
},
// 拦截图片 ( 自行处理其他操作 )
image: function (value){
console.log(value)
if (value){
document.getElementById("imgInput").click();
}
}
}
},
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
}
}
},
}
},
methods:{
// 自定义上传文件
uploadFile(e){
console.log(e)
// 获取鼠标当前位置
let quill = this.$refs.quill.quill.getSelection().index
// // 插入图片 图片地址
// this.$refs.quill.quill.insertEmbed(quill, 'image', 'http://60.30.92.142:19999/api/upload/mnt/vms/cdr-bicose/media/banner/2022-05-11/202205111635209054.png')
// // 调整光标到最后
// this.$refs.quill.quill.setSelection(quill + 1)//光标后移一位
},
getHtml(){
// console.log(this.content)
// this.content 为生成的HTML结构 可自行处理
this.$emit('getChildHtml',this.content)
},
// onEditorBlur(editor) {
// console.log('editor blur!', editor)
// },
// onEditorFocus(editor) {
// console.log('editor focus!', editor)
// },
// onEditorReady(editor) {
// console.log('editor ready!', editor)
// },
}
};
</script>
<style scoped>
.quill-editor >>> .ql-container{
min-height: 500px !important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
content: "宋体";
font-family: "SimSun"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content: "黑体";
font-family: "SimHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content: "楷体";
font-family: "KaiTi"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
content: '12px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
content: '14px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
content: '16px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
content: '18px';
}
</style>
前端小白 如有不足请大家补充 纯属个人理解
使用时可能会报 imports 的错误
只需要在vue.config.js 文件中加上下面代码贴上去 重启你的项目就OK
const webpack = require('webpack')
module.exports = {
chainWebpack: config => {
config.plugin('provide').use(webpack.ProvidePlugin, [{
'window.Quill': 'quill'
}])
}
}
