npm install quill
<template>
<div>
<div class="editor"></div>
</div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import QuillBetterTable from 'quill-better-table'// 引用table
import 'quill-better-table/dist/quill-better-table.css'
Quill.register({
'modules/better-table': QuillBetterTable
}, true)
export default {
name: 'DsEditor',
props: ['value'],
data () {
return {
quill: null,
options: {
theme: 'snow',
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': []}],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': []}],
[{ 'align': [] }],
['clean'],
['link'],
['sourceEditor'] //新增功能(自定义)
],
handlers: {
sourceEditor: () => { //自定义事件
let tableModule = this.quill.getModule('better-table')
tableModule.getTable()
tableModule.insertTable(3, 3)
}
}
},
// table: true,
//在工具栏增加表格插入、删除功能,插件(quill-better-table)
table: false,
'better-table': {
operationMenu: { // 右击菜单名称修改
items: {
insertColumnRight: {
text: '右侧插入一列'
},
insertColumnLeft: {
text: '左侧插入一列'
},
insertRowUp: {
text: '上侧插入一行'
},
insertRowDown: {
text: '下侧插入一行'
},
mergeCells: {
text: '合并单元格'
},
unmergeCells: {
text: '拆分单元格'
},
deleteColumn: {
text: '删除当前列'
},
deleteRow: {
text: '删除当前行'
},
deleteTable: {
text: '删除表格'
}
},
color: { // 颜色
colors: ['green', 'red', 'yellow', 'blue', 'white'],
text: 'Background Colors:'
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
}
},
placeholder: '点击输入 ...'
}
}
},
watch: {
value (n) {
this.quill.root.innerHTML = n
}
},
mounted () {
let dom = this.$el.querySelector('.editor')
this.quill = new Quill(dom, this.options)
this.quill.root.innerHTML = this.value
// 输入返回内容
this.quill.on('text-change', () => {
this.$emit('getQuill', this.quill.root.innerHTML)
})
// 新增功能的元素内容
const sourceEditorButton = document.querySelector('.ql-sourceEditor')
sourceEditorButton.innerHTML = ''
}
}
</script>
<style lang="stylus">
.editor{
min-height 50vh
}
.qlbt-col-tool{
display:none;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: '标题6';
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体';
}
#disabledMsg.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
color: #bfd9d8;
background-color: #eef6f6;
border-color: #d1e5e5;
}
.ql-snow .ql-tooltip[data-mode=link]::before{
content: '输入链接';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after{
content:'保存';
}
</style>
var fonts = ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'Arial', 'Times-New-Roman']
var Font = Quill.import('attributors/class/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)
tabbar配置中修改
[{ 'font': fonts }],
css中修改对应的中文名称
.ql-editor .ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-editor .ql-font-SimSun {
font-family: "SimSun";
}
.ql-editor .ql-font-SimHei {
font-family: "SimHei";
}
.ql-editor .ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-editor .ql-font-Arial {
font-family: "Arial";
}
.ql-editor .Times-New-Roman {
font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '微软雅黑';
}
.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: "微软雅黑";
}
.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: "宋体";
}
.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: "黑体";
}
.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: "楷体";
}
.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";
}
.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";
}
var sizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px']
var SizeStyle = Quill.import('attributors/style/size')
SizeStyle.whitelist = sizes
Quill.register(SizeStyle, true)
tabbar配置中
[{ 'size': sizes }],
选项中名称修改,css对应修改
.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
.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-label[data-value="10px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
content: '22px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
content: '26px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
content: '32px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
content: '48px';
}
.ql-editor .ql-size-8px {
font-size: 8px;
}
.ql-editor .ql-size-10px {
font-size: 10px;
}
.ql-editor .ql-size-12px {
font-size: 12px;
}
.ql-editor .ql-size-14px {
font-size: 14px;
}
.ql-editor .ql-size-16px {
font-size: 16px;
}
.ql-editor .ql-size-18px {
font-size: 18px;
}
.ql-editor .ql-size-20px {
font-size: 20px;
}
.ql-editor .ql-size-22px {
font-size: 22px;
}
.ql-editor .ql-size-24px {
font-size: 24px;
}
.ql-editor .ql-size-26px {
font-size: 26px;
}
.ql-editor .ql-size-32px {
font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
font-size: 48px;
}
.ql-editor .ql-size-48px {
font-size: 48px;
}
获取html
this.quill.root.innerHTML
**赋值**
this.quill.root.innerHTML=""
默认返回格式是数组
this.quill.getContents()
**赋值**
this.quill.setContents(this.value)
<ds-editor @getQuill="getQuill"></ds-editor>
methods:{
getQuill (v) {
console.log(v.ops)
},
}
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': []}],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': []}],
[{ 'align': [] }],
['clean'],
['link'],
['sourceEditor'] //新增功能(自定义)
],
handlers: {
sourceEditor: () => { //自定义事件
let tableModule = this.quill.getModule('better-table')
tableModule.getTable()
tableModule.insertTable(3, 3)
}
}
},