在项目中需要引入Quill文本编辑器,并且根据需求,需要自定义字体选项、图片拖拽上传和改变大小,所以根据Quill官网系统学习了一下,以下是我学习和研究的结果。
一、主题
Quill的富文本编辑器分为snow和bubble两种。
snow是有工具栏的,如下:
bubble是只有文本域的,如下:
那么具体如何选择
在vue项目中,具体引入Quill的文件中,需要使用哪种主题就写哪个。默认是snow主题的。
export default {
data:function(){
return{
editorOption:{
//theme:'bubble'
theme:'snow'
}
}
}
}
二、自定义工具栏toolbar
1、具体配置如下,需要哪个写哪个。
export default {
data:function(){
return{
editorOption:{
modules:{
toolbar:[
['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','video'] //上传图片、上传视频
]
},theme:'snow'
}
}
}
}
其中color、background、font、align都是有默认值的,写一个空数据即可。如果想要自定义,请往下看。
2、自定义字体列表,加入自己需要的字体
(1)引入一个单独自定义的font.css文件(如下)在app.vue文件中,因为要在初始化的时候就引入才能覆盖掉默认的!!很重要
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //引入编辑器
//quill编辑器的字体
var fonts = ['SimSun','SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font,true);
export default {
data:function(){
return{
content:'',editorOption:{
modules:{
toolbar:[
['bold',['blockquote',[{ 'header': 1 },[{ 'list': 'ordered'},[{ 'script': 'sub'},[{ 'indent': '-1'},[{ 'direction': 'rtl' }],[{ 'size': ['small',[{ 'header': [1,[{ 'color': [] },[{ 'font': fonts }],//把上面定义的字体数组放进来
[{ 'align': [] }],['clean'],['image','video']
]
},theme:'snow'
}
}
}
}
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //引入编辑器
//quill图片可拖拽上传
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop',ImageDrop);
export default {
data:function(){
return{
editorOption:{
modules:{
imageDrop:true,},theme:'snow'
}
}
}
}
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill' //引入编辑器
//quill图片可拖拽改变大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize',ImageResize)
export default {
data:function(){
return{
editorOption:{
modules:{
imageResize: {}
},theme:'snow'
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。