由于官方提供的quill自带的toolbar存在很多限制,例如字体大小只有
Small
、Normal
、Large
、Huge
四种,但是在实际业务中,富文本的显示是多种多样的,此时,我们需要去自定义实现一些功能。
quill编辑器在vue中的使用
1、引入quill包
npm install quill
2、定义基本的富文本编辑器组件Editor
html部分,定义了基本的标签,且toolbar部分可以使用插槽自定义。
<template>
<div class="quill-editor">
<slot name="toolbar"></slot>
<div ref="editor"></div>
</div>
</template>
js部分,主要定义了三个props属性,以及实现了值的双向绑定和事件的抛出。
<script lang="ts">
import Vue from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default Vue.extend({
props: {
value: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '请输入...',
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
quill: null,
content: '',
};
},
watch: {
value() {
if (this.quill) {
if (this.value && this.value !== this.content) {
this.content = this.value;
this.quill.pasteHTML(this.value);
} else if (!this.value) {
this.quill.setText('');
}
}
},
disabled() {
this.quill && this.quill.enable(!this.disabled);
},
},
mounted() {
this.initData();
},
beforeDestroy() {
this.quill = null;
delete this.quill;
},
methods: {
initData() {
if (!this.$el) return;
// 在这里引入实现自定义功能的代码
const toolOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ header: 1 }, { header: 2 }, { script: 'sub' }, { script: 'super' }, { indent: '-1' }, { indent: '+1' }],
[{ color: [] }, { background: [] }, { font: [] }, { align: [] }],
];
const option = {
theme: 'snow',
boundary: document.body,
modules: {
toolbar: {
container: toolOptions,
},
},
placeholder: this.placeholder,
readOnly: false,
};
this.quill = new Quill(this.$refs.editor, option);
this.quill.enable(false);
this.value && this.quill.pasteHTML(this.value);
!this.disabled && this.quill.enable(true);
// emit event
this.quill.on('selection-change', () => {
this.$emit('selection-change', this.quill);
});
this.quill.on('text-change', () => {
const editerCon = this.$refs.editor.children[0];
let html = editerCon.innerHTML;
if (html === '<p><br></p>') html = '';
this.content = html;
this.$emit('input', html);
this.$emit('text-change', this.quill);
});
this.$emit('ready', this.quill);
},
},
});
</script>
css部分,使用了比较新的all属性,避免外部样式影响组件,同时设置了富文本框的最小和最大高度。
<style scoped lang="scss">
.quill-editor {
all: initial;
font-size: inherit;
font-family: inherit;
color: inherit;
::v-deep .ql-editor {
min-height: 200px;
max-height: 500px;
}
}
</style>
至此,一个简单的vue版富文本框以及实现了,把代码复制到项目中就可以当成一个组件使用了。
自定义字体大小和内联样式
由于富文本是作为组件使用的,可能用在不同的场景,比如发送邮件等,而由于quill默认的是使用class来定义样式的,这样就导致我们在富文本框里面定义好的样式,在邮件里面无法正确的生效。
通过查找文档,发现可以通过内联样式来解决这个问题,详情见!quilljs.com/guides/how-…
因为自定义字体大小和内联样式的实现,有很多的共同点,这里把他们放在一起实现。
1、内联自定义字体大小
定义如下代码,在Editor组件的js实现部分引入这个方法,我在代码里面写了注释(在这里引入实现自定义功能的代码
)
// 自定义字体大小
import Quill from 'quill';
export function register(){
const SizeStyle = Quill.import('attributors/style/size');
SizeStyle.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px'];
Quill.register(SizeStyle, true);
}
2、配置toolOptions
更改Editor组件的js实现部分的toolOptions定义,添加如下代码:
const toolOptions = [
...
[{ size: ['12px', '14px', '16px', '18px', '24px', '32px'] }],
]
3、显示样式调整
自定义字体大小后,运行代码我们发现,更改字体大小的功能是实现了,但是页面上显示的都是Normal。浏览器控制台检查标签可以发现,官方通过动态生成样式里面的before的content实现的页面显示,我们可以通过css样式把它更改掉。
<style scoped lang="scss">
.quill-editor {
::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label::before,
::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: attr(data-value);
}
}
</style>
引用链接