在vue中Quill富文本编辑器的使用
（主题、自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小）
1、vue项目安装vue-quill-editor：
npm install vue-quill-editor --save
2、vue项目的main.js方法中引入vue-quill-editor：
import VueQuillEditor from 'vue-quill-editor' //vue-quill-editor其它文件可在应用页面直接引入
Vue.use(VueQuillEditor)
3、应用页面引入并生成富文本域：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<quill-editor
v-model="content"
:options="editorOption"
@change="onEditorChange($event)"
>
</quill-editor>
</div>
</template>
<script>//引入相关文件
import { quillEditor,Quill } from "vue-quill-editor";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//设置字体大小
let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
fontSizeStyle.whitelist=['45px','60px','90px']
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)
export default {
name: 'HelloWorld',
data () {
return {
msg: 'vue-quill-editor demo',
content: '',
editorOption: {//配置工具栏
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
['blockquote', 'code-block'], //引用，代码块
[{ 'header': 1 }, { 'header': 2 }], // 几级标题
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 有序列表，无序列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 下角标，上角标
[{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
[{ 'direction': 'rtl' }], // 文字输入方向
[{ 'size': ['45px','60px','90px'] }], // 字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
[{ 'color': [] }, { 'background': [] }], // 颜色选择
[{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],// 字体
[{ 'align': [] }], // 居中
['clean'] // 清除样式
]
}
// 背景颜色 - background
// 加粗- bold
// 颜色 - color
// 字体 - font
// 内联代码 - code
// 斜体 - italic
// 链接 - link
// 大小 - size
// 删除线 - strike
// 上标/下标 - script
// 下划线 - underline
// 引用- blockquote
// 标题 - header
// 缩进 - indent
// 列表 - list
// 文本对齐 - align
// 文本方向 - direction
// 代码块 - code-block
// 公式 - formula
// 图片 - image
// 视频 - video
// 清除字体样式- clean
}
}
},
created() {
},
mounted() {
},
methods: {
onEditorChange() {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.quill-editor >>> .ql-container {
min-height: 300px;
}/*这里一定要写上，是用来把相关改变的配置在工具栏正常显示如果不写，字体样式的下拉会重复显示Sans Serif，字体大小的下拉会重复显示Normal*/
.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='45px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
content: '45px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='60px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='60px']::before {
content: '60px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='90px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='90px']::before {
content: '90px';
}
</style>
Quill的富文本编辑器分为snow和bubble两种。
snow是有工具栏的，如下：
bubble是只有文本域的，如下：
在vue项目中，具体引入Quill的文件中，需要使用哪种主题就写哪个。默认是snow主题的。
<script>
export default {
data:function(){
return{
editorOption:{
//theme:'bubble'
theme:'snow'
}
}
}
}
</script>
二、自定义工具栏toolbar
1、具体配置如下，需要哪个写哪个。
<script>
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'
}
}
}
}
</script>
其中color、background、font、align都是有默认值的，写一个空数据即可。如果想要自定义，请往下看。
2、自定义字体列表，加入自己需要的字体
（1）引入一个单独自定义的font.css文件（如下）
(1-1)在app.vue文件中，因为要在初始化的时候就引入才能覆盖掉默认的！！很重要
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
@import './style/font';
</style>
（2）font.css
把需要自定义放在字体列表的字体放在这个css中，选择器如下。data-value后的值是要拼在.ql-font-后面的，需要保持一致。
[data-value=a] ql-font-a
content指的是字体列表中的选项
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
content: "宋体";
font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content: "黑体";
font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content: "楷体";
font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
content: "Arial";
font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
content: "Times New Roman";
font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
content: "sans-serif";
font-family: "sans-serif";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-FangSong {
font-family: "FangSong";
}
.ql-font-Arial {
font-family: "Arial";
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
.ql-font-sans-serif {
font-family: "sans-serif";
}
（3）.vue文件中
<script>
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', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 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': fonts }], //把上面定义的字体数组放进来
[{ 'align': [] }],
['clean'],
['image','video']
]
},
theme:'snow'
}
}
}
}
</script>
三、图片拖拽上传ImgeDrop
<script>
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'
}
}
}
}
</script>
四、图片调整大小ImageResize
<script>
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'
}
}
}
}
</script>
Quill使用基本如上。安装可参考https://blog.csdn.net/alison_rose/article/details/79928483
其他应用可参考Quill官网https://quilljs.com/
基于webpack和vue
一、npm 安装 vue-quill-editor
二、在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
三、在模块中引用
<template>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default{
data(){
return {
content:null,
editorOption:{}
}
},
methods:{
onEditorBlur(){//失去焦点事件
},
onEditorFocus(){//获得焦点事件
},
onEditorChange(){//内容改变事件
}
}
}
</script>
这样引入后你会得到这样一个编辑器
那么你如果不需要那么多的工具栏功能要怎么办呢；应该是通过options来修改但是他的默认值是什么的
我在百度找了一圈也没找到方法
最后在https://quilljs.com/docs/themes/这个官方文档里面看到了类似的方法
初始值的设置应该是一样的吧
所以我就照着toolbar部分去修改了options
<script>
import { quillEditor } from 'vue-quill-editor'
export default{
data(){
return {
content:null,
editorOption:{
modules:{
toolbar:[
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block']
]
}
}
}
},
methods:{
onEditorBlur(){//失去焦点事件
},
onEditorFocus(){//获得焦点事件
},
onEditorChange(){//内容改变事件
}
}
}
</script>
果然 生效了 只显示了我写在toolbar里面的模块
那么toolbar工具栏对应功能的模块名是什么呢 我继续往下看文档 发现大致上有以下的功能
背景颜色 - background
加粗- bold
颜色 - color
字体 - font
内联代码 - code
斜体 - italic
链接 - link
大小 - size
删除线 - strike
上标/下标 - script
下划线 - underline
引用- blockquote
标题 - header
缩进 - indent
列表 - list
文本对齐 - align
文本方向 - direction
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
然而我试着直接引入发现有部分的图标并没有显示；
然后我发现他有些如list这种列表应该是有默认值，我在很后面的文档里发现了这个默认格式规范 这个官方文档也是个坑 内容不写到一块的 还好我聪明机智；
大致上分为这几类：
1.只需要填写功能名的
加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
这一类的引用 直接['name','name']这种格式就好了
2.需要有默认值的
标题 - header
[{ 'header': 1 }, { 'header': 2 }] 值字体大小
列表 - list
[{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
上标/下标 - script
[{ 'script': 'sub'}, { 'script': 'super' }], 值sub，super
缩进 - indent
[{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
文本方向 - direction
[{ 'direction': 'rtl' }], 值rtl
这部分如图所示会填写的内容对应提供的值展示功能的图标 如果多个值他家就显示多个图标
3.有多个值 以下拉列表形式显示
大小 - size
[{ 'size': ['small', false, 'large', 'huge'] }],
标题 - header
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
这部分显示如图所示 以下拉列形式显示
4.有系统默认值的功能只需填写一个空数组 就会有出现默认的选项
颜色 - color
背景颜色 - background
字体 - font
文本对齐 - align
他们的格式都是
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }]
这种格式
效果如下 会有默认值出现
toolbar自定义工具栏就是这样咯 剩下的就是根据填写功能到options的modules里就可以了
vue-quill-editor安装及使用：自定义工具栏和自定义中文字体，把字体写在html的style中
若有收获，就点个赞吧
0 人点赞
