富文本编辑器
1.安装quill插件
进入项目的目录下输入命令
npm install quill --save
2.在组件中导入quill
<script>
//导入插件
import Quill from 'quill'
</script>
3.在组件导入quill的样式表
<style>
/* 导入样式表 一定要引入这三个css,不然文本编辑器会出现不规则黑白几何图形 */
@import 'quill/dist/quill.snow.css'
</style>
4.配置基本功能
在mount()中添加下面代码,完成quill初始化
mounted() {
this.$nextTick(resp=>{
// quill富文本 初始化功能
const toolbarOptions = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题字体
[{ 'font': [] }], // 字体
['bold', 'italic', 'underline', 'strike'], // 切换按钮
[{ 'align': [] }], // 对齐方式
['blockquote', 'code-block'], // 文本块/代码块
[{ 'header': 1 }, { 'header': 2 }], // 用户自定义按钮值
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 有序/无序列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 上标/下标
[{ 'indent': '-1'}, { 'indent': '+1' }], // 减少缩进/缩进
[{ 'color': [] }, { 'background': [] }], // 主题默认下拉,使用主题提供的值
['clean'], // 清除格式
['image', 'link', 'video'] // 图片 / 链接 / 视频
]
// 挂载
this.$nextTick(() => {
this.quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow', // 使用主题样式
placeholder: '请输入内容' })
})
})
}
5.需要注意的地址4中的#editor它是div的id,是富文本显示的div
6.基本方法
// 获取内容length
const length = this.quill.getLength() - 1 // 注意要-1
// 获取纯文本
const temptext = this.quill.getText() // 获取文本
const text = temptext.trim().replace(/\s/g, '') // 去掉多余的空格
// 获取html
const html = this.quill.root.innerHTML // 官方不推荐直接获取html,有getContent方法
// 初始化赋值
this.quill.root.innerHTML = html
注意事项
自定义功能较麻烦
图片是以img标签插入的,src是base64的文件流,没有先上传,所以造成文本内容可能会很大