資料
方法一
方法二 ==(建議使用)==
其他
1昭雌、下載Vue-Quill-Editor
npm install vue-quill-editor --save
2烛卧、下載quill（Vue-Quill-Editor需要依賴(lài)）
npm install quill --save
3总放、代碼(1)
<script>
/**
* 富文本vue-quill-editor 組件
* name wangkai
*-------------------設(shè)置文檔----------------
*---------- 1局雄、toolbar工具欄-模塊名----------
* background -------------- 背景顏色
* bold -------------------- 加粗
* color -------------------- 顏色
* font -------------------- 字體
* code -------------------- 內(nèi)聯(lián)代碼
* italic ------------------ 斜體
* link -------------------- 鏈接
* size -------------------- 大小
* strike ------------------ 刪除線
* script ------------------ 上標(biāo)/下標(biāo)
* underline --------------- 下劃線
* blockquote -------------- 引用
* header ------------------ 標(biāo)題
* indent ------------------ 縮頸
* list -------------------- 列表
* align ------------------- 文本對(duì)齊
* 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工具欄設(shè)置
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: {
// 表格數(shù)據(jù)
content: {
type: String,
default: () => (''),
required: true,
},
},
methods: {
// 失去焦點(diǎn)事件
onEditorBlur() {
this.$emit('onEditorBlur', this.data);
},
// 獲得焦點(diǎn)事件
onEditorFocus() {
this.$emit('onEditorFocus', this.data);
},
// 編輯器文本發(fā)生變化
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: {
// 失去焦點(diǎn)事件
onEditorBlur(...args) {
this.$emit('blur', ...args);
},
// 獲得焦點(diǎn)事件
onEditorFocus(...args) {
this.$emit('focus', ...args);
},
// 編輯器文本發(fā)生變化
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' }")
修改后的組件(支持自定義設(shè)置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: {
// 失去焦點(diǎn)事件
onEditorBlur(...args) {
this.$emit('blur', ...args);
},
// 獲得焦點(diǎn)事件
onEditorFocus(...args) {
this.$emit('focus', ...args);
},
// 編輯器文本發(fā)生變化
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
*-------------------設(shè)置文檔----------------
*---------- 1秘遏、toolbar工具欄-模塊名----------
* background -------------- 背景顏色
* bold -------------------- 加粗
* color -------------------- 顏色
* font -------------------- 字體
* code -------------------- 內(nèi)聯(lián)代碼
* italic ------------------ 斜體
* link -------------------- 鏈接
* size -------------------- 大小
* strike ------------------ 刪除線
* script ------------------ 上標(biāo)/下標(biāo)
* underline --------------- 下劃線
* blockquote -------------- 引用
* header ------------------ 標(biāo)題
* indent ------------------ 縮頸
* list -------------------- 列表
* align ------------------- 文本對(duì)齊
* 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' }],
],
