文档地址:https://quilljs.com/docs/quickstart/
github地址:https://github.com/surmon-china/vue-quill-editor
使用方法:
#### NPMnpm install vue-quill-editor --save#### mian.jsimport Vue from 'vue'import VueQuillEditor from 'vue-quill-editor' // require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor, /* { default global options } */)### 使用 demo复制代码
常见问题
问题一:输入文字出现首字母的问题
删除node_modules删除 package-lock.json最后npm install这个问题很奇怪我看很多博客都是通过这个方式解决的,确实可以解决这个问题复制代码
问题二:字体样式丢失
解决方案: js:
import Quill from 'quill'
var Size = Quill.import('attributors/style/size');
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '32px'];
Quill.register(Size, true);
问题三:缩进indent转为style
IndentStyle.jsvar Parchment = Quill.import("parchment")const levels = [1, 2, 3, 4, 5];const multiplier = 2;export default class IndentAttributor extends Parchment.Attributor.Style { add(node, value) { return super.add(node, `${value * multiplier}em`); } value(node) { return parseFloat(super.value(node)) / multiplier || undefined; // Don't return NaN }}const IndentStyle = new IndentAttributor('indent', 'margin-left', { scope: Parchment.Scope.BLOCK, whitelist: levels.map(value => `${value * multiplier}em`)});Quill.register(IndentStyle);复制代码
import Quill from 'quill'import IndentStyle from './Indent.js';...下面就正常使用就好了![](https://user-gold-cdn.xitu.io/2018/11/7/166ec44a8a529b79?w=1208&h=246&f=png&s=97191)复制代码
问题四:禁止富文本编辑
场景:比如有些时候文章需要下架,那么下架的时候是不允许编辑的
this.$refs.myQuillEditor.quill.enable(false)// false禁止编辑 true语序编辑复制代码