博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 富文本编辑器 vue-quill-editor
阅读量:5964 次
发布时间:2019-06-19

本文共 1635 字,大约阅读时间需要 5 分钟。

文档地址: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语序编辑复制代码

转载地址:http://wqjax.baihongyu.com/

你可能感兴趣的文章
WLAN市场销量逐步逼近有线网络
查看>>
力龙信息布局大数据领域
查看>>
大数据巧治职业差评师 生存空间锐减九成
查看>>
天津开展免费无线局域网建设
查看>>
提高信息安全意识对网络勒索病毒说不
查看>>
英国政府可能利用曼彻斯特自杀袭击要求互联网公司破解加密
查看>>
Mozilla 将大幅简化火狐浏览器的同步操作
查看>>
Convert Url to InetAddress
查看>>
oracle 限制特定ip登录
查看>>
解酒方法
查看>>
vi 命令
查看>>
1.1
查看>>
[logstash-input-redis]插件使用详解
查看>>
优化应用的电池寿命(笔记)-1
查看>>
SSH Secure Shell Client
查看>>
JFinal源码分析------初始化那些事儿
查看>>
处理 允许远程协助连接这台计算机 灰色
查看>>
使用Jquery 加载页面时调用JS
查看>>
css+div+jquery弹出层
查看>>
求职相关(链接,不定期更新)
查看>>