quill/vue-quill-editor的基础使用,自定义工具栏介绍,重新写图片/视频上传方法,insertEmbed插入,设置光标位置,增/添加字体、字号
基础使用<template><div><quill-editorref="edit"v-model="content":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"/></
·
基础使用
<template>
<div>
<quill-editor
ref="edit"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
/>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
name: 'Article',
components: {
quillEditor
},
data () {
return {
content: '',
editorOption: {
theme: 'snow', // 主题
placeholder: '',
modules: {
toolbar: {
container: [
['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: [] }],
[{ align: [] }],
['clean', 'link', 'image', 'video'],
['addBtn'],
], // 自定义工具栏选项
},
}
}
}
},
mounted () {
},
methods: {
onEditorBlur (editor) {
},
onEditorFocus (editor) {
},
onEditorChange ({ editor, html, text }) {
console.log(this.content)
}
}
}
</script>
<style scoped>
.quill-editor {
height: 200px;
}
</style>
效果图
全部工具栏介绍
['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'] //上传图片、上传视频
重新写图片/视频上传方法,禁用原来的
注意:这里以为图片为例,如果想修改视频,image替换为video即可。
editorOption: {
theme: 'snow', // 主题
placeholder: '',
modules: {
toolbar: {
container: [], // 自定义工具栏选项
handlers: {
'image': function (value) {
if (value) {
console.log('在这里可以重新写上传图片的相关逻辑')
// 自定义内容
} else {
this.quill.format('image', false)
}
}
}
},
}
}
效果图
自定义工具栏
editorOption: {
theme: 'snow', // 主题
placeholder: '',
modules: {
toolbar: {
container: [
...
['addBtn'],
], // 自定义工具栏选项
handlers: {
addBtn: () => {
console.log('这里是自定义工具打印出来的')
},
},
},
}
}
mounted () {
const addBtn = document.querySelector('.ql-addBtn')
addBtn.className = 'ql-image'
addBtn.innerHTML = 'test'
},
自定义工具栏使用insertEmbed插入图片/视频
注意:这里以视频为例。
handlers: {
addBtn: () => {
this.$refs.edit.quill.insertEmbed(0, 'video', 'https://xxx.mp4')
},
},
进阶:
获取当前光标位置,插入:
const quill = this.$refs.edit.quill
const addImageRange = quill.getSelection()
const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
this.quill.insertEmbed(newRange, 'image', 'https://xxx.png')
this.quill.setSelection(1 + newRange)
光标在设置在最后
当后台返回值,设置上默认值或者在使用编辑功能时候,光标会在最前面,这里显然是不合理的,所以需要重置光标位置:
const quill = this.$refs.edit.quill
// this.content为富文本现有的值
setTimeout(() => quill.setSelection(quill.getSelection().index + this.content.length, 0), 0)
添加字体/字号
字体
// js
<script>
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 {
...
container: [
[{ font: fonts }],
], // 自定义工具栏选项
...
}
</script>
// css
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
content: "宋体";
font-family: "SimSun";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content: "黑体";
font-family: "SimHei";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content: "楷体";
font-family: "KaiTi";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
content: "Arial";
font-family: "Arial";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
content: "Times New Roman";
font-family: "Times New Roman";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
content: "sans-serif";
font-family: "sans-serif";
}
/deep/ .ql-font-SimSun {
font-family: "SimSun";
}
/deep/ .ql-font-SimHei {
font-family: "SimHei";
}
/deep/ .ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
/deep/ .ql-font-KaiTi {
font-family: "KaiTi";
}
/deep/ .ql-font-FangSong {
font-family: "FangSong";
}
/deep/ .ql-font-Arial {
font-family: "Arial";
}
/deep/ .ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
/deep/ .ql-font-sans-serif {
font-family: "sans-serif";
}
字号
// js
var fonts = ['monospace', 'FangSong', 'Microsoft-YaHei','SimSun','serif','SimHei','KaiTi','Arial','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts //将字体加入到白名单
Quill.register(Font, true)
// css
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft10"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft10"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft12"]::before {
content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft14"]::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft16"]::before {
content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft18"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft32"]::before {
content: "32px";
}
.ql-size-ft10 {
font-size: 10px;
}
.ql-size-ft12 {
font-size: 10px;
}
.ql-size-ft14 {
font-size: 14px;
}
.ql-size-ft16 {
font-size: 16px;
}
.ql-size-ft18 {
font-size: 18px;
}
.ql-size-ft32 {
font-size: 32px;
}
更多推荐
已为社区贡献3条内容
所有评论(0)