quill-editor的使用和自定义
我的项目中有很多地方要用到，所以我封装了一个组件
1.安装vue-quill-editor
npm install vue-quill-editor -S
2.安装vue-quill-editor
npm install quill -S
安装后在main.js中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)
3.安装vue-quill-editor-upload 因为我用到图片上传服务器，如果使用他的可以不用安装
vue-quill-editor-upload
安装后要引入组件、注册组件
import {quillRedefine} from 'vue-quill-editor-upload'
components:{ quillRedefine },
一下是封装好的quill-editor组件
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
/*富文本编辑图片上传配置*/
const uploadConfig = {
action: 'common.uploadfile.single', // 必填参数 图片上传地址
methods: 'POST', // 必填参数 图片上传方式
token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
name: 'img', // 必填参数 文件的参数名
size: 1024, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
};
import {quillRedefine} from 'vue-quill-editor-upload'
export default {
components:{ quillRedefine },
name: 'App',
props: {
value: {
type: String,
default: '',
}
},
data(){
return {
content: this.value || '',
editorOption: {}
}
},
watch:{
value(val) {
this.content = val
},
deep:true
},
created(){
this.editorOption = quillRedefine(
{
// 图片上传的设置
uploadConfig: {
action: '/api//file/upload', // 必填参数 图片上传地址
methods: 'POST', // 可选参数 图片上传方式 默认为post
token: sessionStorage.token, // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
name: 'img', // 可选参数 文件的参数名 默认为img
size: 1024, // 可选参数 图片限制大小，单位为Kb, 1M = 1024Kb
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon', // 可选参数 可上传的图片格式
res: (respnse) => {
console.log(respnse)
return respnse.data.url
},
name: 'file', // 图片上传参数名
},
// 以下所有设置都和vue-quill-editor本身所对应
placeholder: '请输入内容', // 可选参数 富文本框内的提示语
theme: '', // 可选参数 富文本编辑器的风格
toolOptions: [
[{'size': ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']}],
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif','PingFang','Helvetica','Georgia','Impact','Verdana','Comic-Sans-MS'] }],
[{ 'align': [] }],
["image"], //上传图片
['clean'], // 清除文本格式-----['clean']
], // 可选参数 选择工具栏的需要哪些功能 默认是全部
handlers: {} // 可选参数 重定义的事件，比如link等事件
},
)
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},
methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
// 文本改变后同步回父组件绑定的值
onEditorChange(event) {
console.log(event)
this.$emit('input', event.html)
}
}
}
</script>
<style>
.edit_container {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
margin: 20px 0;
}
.ql-container {
height: 500px;
}
</style>
4.在其他组件中引入、使用
<template>
<div class="banner-contaner white-bgc">
<QuillEditor @input="getCon" :value="content"></QuillEditor>
<el-button type="primary" class="save-btn">点击保存</el-button>
</div>
</template>
<script>
import QuillEditor from './commonComponents/QuillEditor'
export default {
components:{ QuillEditor },
name:'',
data(){
return{
content:'',
}
},
created(){
this.getData();
},
methods:{
getCon(con){
this.content = con
},
// 回填
getData(){
var menuId = this.menuId
this.get(`/api/school_association/content?menuId=${menuId}`,{},res => {
this.content = res.data[0].content
},error => {
})
}
}
}
</script>
quill-editor最大的优势就是可以自定义，修改字大小、字体
比如设置font-size
首先找到 quill --> dist --> quill.core.js
var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
scope: _parchment2.default.Scope.INLINE,
whitelist: ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
});
找到 quill --> dist --> quill.js
var SIZES = ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'];
var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
scope: _parchment2.default.Scope.INLINE,
whitelist: ['8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
});
自定义font.css，以下我只举了一个例子，要对每个字号都进行样式编写 ，一定要在main.js中引入（有人的处理是在quill.bubble.css、quill.snow.css、quill.core.css添加样式，可根据自己爱好进行修改）
.ql-editor .ql-size-8px {
font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
content: '8px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
content: '8px';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
font-size: 8px;
}