Quill编辑器自定义字体大小

您所在的位置：网站首页 › quill翻译中文 › Quill编辑器自定义字体大小

Quill编辑器自定义字体大小

#Quill编辑器自定义字体大小| 来源: 网络整理| 查看: 265

由于官方提供的quill自带的toolbar存在很多限制，例如字体大小只有 Small、Normal、Large、Huge四种，但是在实际业务中，富文本的显示是多种多样的，此时，我们需要去自定义实现一些功能。

quill编辑器在vue中的使用 1、引入quill包 npm install quill 2、定义基本的富文本编辑器组件Editor

html部分，定义了基本的标签，且toolbar部分可以使用插槽自定义。

js部分，主要定义了三个props属性，以及实现了值的双向绑定和事件的抛出。

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 === '

') html = ''; this.content = html; this.$emit('input', html); this.$emit('text-change', this.quill); }); this.$emit('ready', this.quill); }, }, });

css部分，使用了比较新的all属性，避免外部样式影响组件，同时设置了富文本框的最小和最大高度。

.quill-editor { all: initial; font-size: inherit; font-family: inherit; color: inherit; ::v-deep .ql-editor { min-height: 200px; max-height: 500px; } }

至此，一个简单的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样式把它更改掉。

.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); } }

引用链接

[1] quilljs.com/guides/how-…: quilljs.com/guides/how-…

【本文地址】

Quill编辑器自定义字体大小

Quill编辑器自定义字体大小

今日新闻

推荐新闻