vue 富文本编辑器 wangEditor 组件封装

1
2
npm install wangeditor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<template>
	<div class="editor">
		<!--动态绑定id, 否则不能在一个页面上使用多个-->
		<div :id="uniqueId"></div>
	</div>
</template>

<script>
import E from "wangeditor"

export default {
	name: 'editor',
	data() {
		return {
			content: "",
			editor: null,
			info_: null
		}
	},
	model: {
		prop: 'desc',
		event: 'change'
	},
	watch: {
		isClear(val) {
			if (val) {
				this.editor.txt.clear()
			}
		},
		desc(value) {
			if (value != this.editor.txt.html()) {
				this.editor.txt.html(this.desc)
			}
		}
	},
	props: {
		desc: {
			type: String,
			default: ""
		},
		//业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
		isClear: {
			type: Boolean,
			default: false
		},
		uploadUrl: {
			type: String,
			default: ""
		},
		uniqueId: {
			type: String,
			default: "e"
		}
	},
	mounted() {
		this.initE();
	},
	methods: {
		initE() {
			this.editor = new E('#' + this.uniqueId)
			this.editor.config.onchangeTimeout = 1000 // 单位 ms
			this.editor.config.uploadFileName = 'file'
			// this.editor.config.uploadImgServer = this.uploadUrl  // 你的服务器地址
			this.editor.config.uploadImgServer = '/api/editor-upload'  // 你的服务器地址
			this.editor.config.uploadImgHooks = {
				before: function (xhr, editor, files) {
					// 图片上传之前触发
					// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
					
					// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
					// return {
					//     prevent: true,
					//     msg: '放弃上传'
					// }
				},
				success: function (xhr, editor, result) {
					// 图片上传并返回结果，图片插入成功之后触发
					// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
				},
				fail: function (xhr, editor, result) {
					// 图片上传并返回结果，但图片插入错误时触发
					// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
				},
				error: function (xhr, editor) {
					// 图片上传出错时触发
					// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
				},
				timeout: function (xhr, editor) {
					// 图片上传超时时触发
					// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
				},
				
				// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
				// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
				customInsert: function (insertImg, result, editor) {
					// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
					// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
					
					// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
					console.log(result.url)
					var url = result.url
					insertImg(url)
					
					// result 必须是一个 JSON 格式字符串！！！否则报错
				}
			}
			this.editor.config.onchange = (html) => {
				this.info_ = html // 绑定当前逐渐地值
				this.$emit('change', this.info_) // 将内容同步到父组件中
			}
			this.editor.config.menus = [
				'head',  // 标题
				'bold',  // 粗体
				'fontSize',  // 字号
				'fontName',  // 字体
				'italic',  // 斜体
				'underline',  // 下划线
				'strikeThrough',  // 删除线
				'foreColor',  // 文字颜色
				'backColor',  // 背景颜色
				'link',  // 插入链接
				'list',  // 列表
				'justify',  // 对齐方式
				'quote',  // 引用
				'emoticon',  // 表情
				'image',  // 插入图片
				'table',  // 表格
				'code',  // 插入代码
				'undo',  // 撤销
				'redo'  // 重复
			]
			this.editor.create()
		}
	},
}
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
<editor v-model="ruleForm.reply" :uniqueId="'reply'" :isClear="isClear"></editor>

<script>
import editor from '../../tools/editor'

export default {
	components: {
		editor
	},
}
</script>