vue富文本编辑器的使用_elementui富文本

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、安装

npm install quill --save

二、注册

1.在.main.js中注册富文本编辑器

Vue.use(VueEditor)

三、使用

1.以下是写好的富文本编辑器，附带功能齐全，复制即用！！！（Quill官方中文文档）

2.新建一个Editor文件夹，文件夹下创建一个index.vue文件，将此复制到vue文件里

3.将Editor文件夹放入Vue项目的components组件包里方便其他页面直接引用富文本编辑器

<template>
<div ref="editor" class="editor" :style="styles" />
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default { 

name: 'Editor',
props: { 

/* 编辑器的内容 */
value: { 

type: String,
default: ''
},
/* 高度 */
height: { 

type: Number,
default: null
},
/* 最小高度 */
minHeight: { 

type: Number,
default: null
}
},
data() { 

return { 

Quill: null,
currentValue: '',
options: { 

theme: 'snow',
bounds: document.body,
debug: 'warn',
modules: { 

// 工具栏配置
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用 代码块
[{ 
 list: 'ordered' }, { 
 list: 'bullet' }], // 有序、无序列表
[{ 
 indent: '-1' }, { 
 indent: '+1' }], // 缩进
[{ 
 size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ 
 header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ 
 color: [] }, { 
 background: [] }], // 字体颜色、字体背景颜色
[{ 
 align: [] }], // 对齐方式
['clean'], // 清除文本格式
['link', 'image', 'video'] // 链接、图片、视频
]
},
placeholder: '请输入内容',
readOnly: false //只读模式 true
}
}
},
computed: { 

styles() { 

const style = { 
}
if (this.minHeight) { 

style.minHeight = `${ 
this.minHeight}px`
}
if (this.height) { 

style.height = `${ 
this.height}px`
}
return style
}
},
watch: { 

value: { 

handler(val) { 

if (val !== this.currentValue) { 

this.currentValue = val === null ? '' : val
if (this.Quill) { 

this.Quill.pasteHTML(this.currentValue)
}
}
},
immediate: true
}
},
mounted() { 

this.init()
},
beforeDestroy() { 

this.Quill = null
},
methods: { 

init() { 

const editor = this.$refs.editor
this.Quill = new Quill(editor, this.options)
this.Quill.pasteHTML(this.currentValue)
this.Quill.on('text-change', (delta, oldDelta, source) => { 

const html = this.$refs.editor.children[0].innerHTML
const text = this.Quill.getText()
const quill = this.Quill
this.currentValue = html
this.$emit('input', html)
this.$emit('on-change', { 
 html, text, quill })
})
this.Quill.on('text-change', (delta, oldDelta, source) => { 

this.$emit('on-text-change', delta, oldDelta, source)
})
this.Quill.on('selection-change', (range, oldRange, source) => { 

this.$emit('on-selection-change', range, oldRange, source)
})
this.Quill.on('editor-change', (eventName, ...args) => { 

this.$emit('on-editor-change', eventName, ...args)
})
}
}
}
</script>
<style>
.editor, .ql-toolbar { 

white-space: pre-wrap!important;
line-height: normal !important;
}
.quill-img { 

display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before { 

content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { 

border-right: 0;
content: "保存";
padding-right: 0;
}
.ql-snow .ql-tooltip[data-mode="video"]::before { 

content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { 

content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { 

content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { 

content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { 

content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before { 

content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { 

content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { 

content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { 

content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { 

content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { 

content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { 

content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before { 

content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { 

content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { 

content: "等宽字体";
}
</style>

4.页面中的使用

<el-row>
<el-col :span="24">
<el-form-item label="发布内容" prop="content">
<!--富文本编辑器 此处必须设置富文本编辑器高度-->
<editor v-model="form.content" :min-height="192" />
</el-form-item>
</el-col>
</el-row>

5.页面引入刚刚写好的富文本编辑器组件

import Editor from '@/public/components/Editor';
//加载私有组件
components: { 

Editor
},

6.效果：