-
Notifications
You must be signed in to change notification settings - Fork 271
/
SlsEditor.vue
170 lines (150 loc) · 5.97 KB
/
SlsEditor.vue
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<template>
<div>
<div
style="width: 1100px;"
:id="id"></div>
</div>
</template>
<script>
import WangEditor from 'wangeditor'
import Common from './js/Common'
var Js = Common('sls-textarea')
Js.mixins = [{
data () {
return {
is_init: true,
editor: null,
id: '',
menus: [
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
],
attrs: {
zIndex: 90,
uploadImgShowBase64: false, // 使用 base64 保存图片
uploadImgServer: '', // 上传图片到服务器
showLinkImg: true, // 隐藏“网络图片”tab
uploadImgMaxSize: 5 * 1024 * 1024, // 默认限制图片大小是 5M
uploadImgMaxLength: 10000, // 限制一次最多能传几张图片,默认为 10000 张(即不限制),需要限制可自己配置
uploadImgParams: {}, // 上传图片时可自定义传递一些参数,例如传递验证的token等。这些参数会拼接到 url 的参数中,也会被添加到formdata中。
uploadFileName: '', // 上传图片时,可自定义filename,即在使用formdata.append(name, file)添加图片文件时,自定义第一个参数。
uploadImgHeaders: {}, // 上传图片时刻自定义设置 header
withCredentials: false, // 跨域上传中如果需要传递 cookie 需设置 withCredentials
uploadImgTimeout: 5000 // 默认的 timeout 时间是 5 秒钟
},
event: {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// before: function (xhr, editor, files) {},
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// success: function (xhr, editor, result) {},
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// fail: function (xhr, editor, result) {},
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
// error: function (xhr, editor) {},
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
// timeout: function (xhr, editor) {},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
// result 必须是一个 JSON 格式字符串!!!否则报错
/* customInsert: function (insertImg, result, editor) {
var url = result.url
insertImg(url)
} */
}
}
},
computed: {
config () {
return this.Data.config || {}
}
},
methods: {
/**
* 初始化参数
*/
initParams () {
this.id = this.data.id || this.data.key
if (this.config.show_menus && Array.isArray(this.config.show_menus)) {
this.menus = this.menus.filter(item => {
return this.config.show_menus.indexOf(item) !== -1
})
} else {
if (this.config.hide_menus && Array.isArray(this.config.hide_menus)) {
this.menus = this.menus.filter(item => {
return this.config.hide_menus.indexOf(item) === -1
})
}
}
},
onSetEditorContent () {
},
/**
* 初始化实例编辑器
*/
initWangEditor () {
this.editor = new WangEditor('#' + this.id)
this.editor.customConfig = {}
this.editor.customConfig.menus = this.menus
this.editor.customConfig = Object.assign(this.editor.customConfig, this.attrs, this.config.attrs)
this.editor.customConfig.uploadImgHooks = {}
this.editor.customConfig.uploadImgHooks = Object.assign(this.editor.customConfig.uploadImgHooks, this.config.events)
this.editor.customConfig.onchange = (html) => {
this.submit_data[this.data.key] = html
this.submit_info[this.data.key] = this.editor.txt.text()
this.config.onchange && this.config.onchange({
value: this.submit_data[this.data.key],
info: this.submit_info[this.data.key]
})
}
this.editor.create()
console.log(this.editor.txt.html)
console.log(this.editor.txt.text)
}
},
created () {
this.initParams()
},
mounted () {
this.initWangEditor()
},
watch: {
submit_data: {
deep: true,
handler (v) {
/* this.submit_data = v;
if (this.editor && this.is_init === true) {
this.is_init = false;
this.editor.txt.html(this.submit_data[this.data.key]);
} */
}
}
}
}]
export default Js
</script>
<style scoped lang="less">
</style>