资料
方法一
方法二 ==(建议使用)==
其他
1、下载Vue-Quill-Editor
npm install vue-quill-editor --save
2、下载quill（Vue-Quill-Editor需要依赖）
npm install quill --save
3、代码(1)
<script>
/**
* 富文本vue-quill-editor 组件
* name wangkai
*-------------------设置文档----------------
*---------- 1、toolbar工具栏-模块名----------
* background -------------- 背景颜色
* bold -------------------- 加粗
* color -------------------- 颜色
* font -------------------- 字体
* code -------------------- 内联代码
* italic ------------------ 斜体
* link -------------------- 链接
* size -------------------- 大小
* strike ------------------ 删除线
* script ------------------ 上标/下标
* underline --------------- 下划线
* blockquote -------------- 引用
* header ------------------ 标题
* indent ------------------ 缩颈
* list -------------------- 列表
* align ------------------- 文本对齐
* direction --------------- 文本方向
* code-block -------------- 代码块
* formula ----------------- 公式
* image ------------------- 图片
* video ------------------- 视频
* clean ------------------- 清除字体样式
*/
import Quill from 'quill';
// quill图片可拖拽上传
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);
export default {
name: 'the_rich_text',
data() {
return {
data: this.content,
// toolbar工具栏设置
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ color: [] }, { background: [] }],
['link', 'image'],
['blockquote', 'code-block'],
[{ align: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
// [{ header: 1 }, { header: 2 }],
// [{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ['small', false, 'large', 'huge'] }],
[{ font: [] }],
// [{ indent: '-1' }, { indent: '+1' }],
],
imageDrop: true,
},
},
};
},
props: {
// 表格数据
content: {
type: String,
default: () => (''),
required: true,
},
},
methods: {
// 失去焦点事件
onEditorBlur() {
this.$emit('onEditorBlur', this.data);
},
// 获得焦点事件
onEditorFocus() {
this.$emit('onEditorFocus', this.data);
},
// 编辑器文本发生变化
onEditorChange() {
this.$emit('onEditorChange', this.data);
},
},
};
</script>
<template lang="pug">
.the-rich-text
quill-editor(
v-model="data"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur"
@focus="onEditorFocus"
@change="onEditorChange")
</template>
<style lang="stylus" scoped>
.the-rich-text
width 100%
margin 20px 0px
display inline-block
background #ffffff
</style>
4、代码(2)
"quill": "^1.3.6",
"quill-image-extend-module": "^1.1.2",
"vue-quill-editor": "^3.0.6",
<script>
/**
* 富文本 vue-quill-editor 组件
* Author: wangkai
*/
import { quillEditor, Quill } from 'vue-quill-editor';
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Quill.register('modules/ImageExtend', ImageExtend);
export default {
name: 'the_rich_text',
components: {
quillEditor,
},
data() {
return {
content: '',
};
},
model: {
event: 'change',
},
props: {
value: {
type: String,
default: () => (''),
required: true,
},
action: {
type: String,
default: null,
},
name: {
type: String,
default: 'file',
},
headers: {
type: Object,
default: () => ({}),
},
size: {
type: Number,
default: null,
},
formData: {
type: Object,
default: () => ({}),
},
},
computed: {
options() {
const { name, action, headers, size } = this;
return {
modules: {
ImageExtend: {
loading: true,
name,
action,
size,
headers: (xhr) => {
Object.entries(headers).forEach((ary) => {
xhr.setRequestHeader(ary[0], ary[1]);
});
},
response: res => res.url,
sizeError() {
},
start: () => {
},
end: () => {
},
error: () => {
},
success: () => {
},
change: (xhr, formData) => {
Object.entries(this.formData).forEach((ary) => {
formData.append(ary[0], ary[1]);
});
},
},
toolbar: {
container,
handlers: {
image() {
QuillWatch.emit(this.quill.id);
},
},
},
},
};
},
},
methods: {
// 失去焦点事件
onEditorBlur(...args) {
this.$emit('blur', ...args);
},
// 获得焦点事件
onEditorFocus(...args) {
this.$emit('focus', ...args);
},
// 编辑器文本发生变化
onEditorChange({ html }) {
this.$emit('change', html);
},
},
};
</script>
<template lang="pug">
.the-rich-text
quill-editor(
ref="myQuillEditor"
:value="value"
:options="options"
@blur="onEditorBlur"
@focus="onEditorFocus"
@change="onEditorChange")
</template>
<style lang="stylus" scoped>
.the-rich-text
width 100%
margin 20px 0px
display inline-block
background #ffffff
</style>
5、组件使用
//-富文本
the-rich-text(
v-model="data"
action="http://api.pay-star.com/admin/images"
:headers="{ 'company-token': '4P6snTNhfADVykzxYkLAvs' }")
修改后的组件(支持自定义设置toolbar-工具栏)
6、代码(3)
<script>
/**
* 富文本 vue-quill-editor 组件
* Author: wangkai
*/
import { quillEditor, Quill } from 'vue-quill-editor';
import { ImageExtend, QuillWatch } from 'quill-image-extend-module';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Quill.register('modules/ImageExtend', ImageExtend);
export default {
name: 'the_rich_text',
components: {
quillEditor,
},
data() {
return {
content: '',
};
},
model: {
event: 'change',
},
props: {
value: {
type: String,
default: () => (''),
required: true,
},
action: {
type: String,
default: null,
},
name: {
type: String,
default: 'file',
},
headers: {
type: Object,
default: () => ({}),
},
size: {
type: Number,
default: null,
},
formData: {
type: Object,
default: () => ({}),
},
container: {
type: Array,
default: () => ([]),
},
},
computed: {
options() {
const { name, action, headers, size, container } = this;
return {
modules: {
ImageExtend: {
loading: true,
name,
action,
size,
headers: (xhr) => {
Object.entries(headers).forEach((ary) => {
xhr.setRequestHeader(ary[0], ary[1]);
});
},
response: res => res.url,
sizeError() {
},
start: () => {
},
end: () => {
},
error: () => {
},
success: () => {
},
change: (xhr, formData) => {
Object.entries(this.formData).forEach((ary) => {
formData.append(ary[0], ary[1]);
});
},
},
toolbar: {
container,
handlers: {
image() {
QuillWatch.emit(this.quill.id);
},
},
},
},
};
},
},
methods: {
// 失去焦点事件
onEditorBlur(...args) {
this.$emit('blur', ...args);
},
// 获得焦点事件
onEditorFocus(...args) {
this.$emit('focus', ...args);
},
// 编辑器文本发生变化
onEditorChange({ html }) {
this.$emit('change', html);
},
},
};
</script>
<template lang="pug">
.the-rich-text
quill-editor(
ref="myQuillEditor"
:value="value"
:options="options"
@blur="onEditorBlur"
@focus="onEditorFocus"
@change="onEditorChange")
</template>
<style lang="stylus" scoped>
.the-rich-text
width 100%
margin 20px 0px
display inline-block
background #ffffff
</style>
7、组件使用(修改后)
//-富文本-HTML
the-rich-text(
v-model="data"
:container="toolbar", // 添加自定义功能。
action="http://api.pay-star.com/admin/images"
:headers="{ 'company-token': '4P6snTNhfADVykzxYkLAvs' }")
* 富文本vue-quill-editor 组件
* name wangkai
*-------------------设置文档----------------
*---------- 1、toolbar工具栏-模块名----------
* background -------------- 背景颜色
* bold -------------------- 加粗
* color -------------------- 颜色
* font -------------------- 字体
* code -------------------- 内联代码
* italic ------------------ 斜体
* link -------------------- 链接
* size -------------------- 大小
* strike ------------------ 删除线
* script ------------------ 上标/下标
* underline --------------- 下划线
* blockquote -------------- 引用
* header ------------------ 标题
* indent ------------------ 缩颈
* list -------------------- 列表
* align ------------------- 文本对齐
* direction --------------- 文本方向
* code-block -------------- 代码块
* formula ----------------- 公式
* image ------------------- 图片
* video ------------------- 视频
* clean ------------------- 清除字体样式
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ color: [] }, { background: [] }],
['link', 'image'],
['blockquote', 'code-block'],
[{ align: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
// [{ header: 1 }, { header: 2 }],
// [{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ['small', false, 'large', 'huge'] }],
[{ font: [] }],
// [{ indent: '-1' }, { indent: '+1' }],
],
