-
Notifications
You must be signed in to change notification settings - Fork 63
/
tem_wangeditor.vue
190 lines (178 loc) · 5.65 KB
/
tem_wangeditor.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!--所有页面可以使用的wangeditor的公共组件tempalte-->
<template>
<div>
<div id="myWangEditor" ref="myWangEditor" style="margin-bottom:10px;">
</div>
<el-button type="primary" @click="getHtml">确定提交</el-button>
<!-- <el-button type="info" @click="getText">获取text</el-button>
<el-button @click="closeDialoge">取 消</el-button> -->
</div>
</template>
<script>
import wangEditor from 'wangeditor';
export default({
name:"tem_WangEditor",
data(){
return {
editor:""
}
},
props:{
uploadFileName:{//设置上传图片文件的时候,后台接受的文件名,files.myFileName;
type:String,
default:'myFileName'
},
uploadImgMaxSize:{// 将图片大小限制为 3M
type:Number,
default:3 * 1024 * 1024
},
uploadImgMaxLength:{// 限制一次最多上传 1 张图片
type:Number,
default:1
},
withCredentials:{//跨域上传中如果需要传递 cookie 需设置 withCredentials
type:Boolean,
default:true
},
uploadImgTimeout:{//自定义 timeout 时间,这里是设置的3秒
type:Number,
default:3000
},
uploadImgServer:{//上传到后台的接口
type:String,
default:"http://localhost:3000/artical/wangeditor/upload"
},
uploadImgParams:{//如果要自定义传一些参数,就在这里;// 如果版本 <=v3.1.0 ,属性值会自动进行 encode ,此处无需 encode// 如果版本 >=v3.1.1 ,属性值不会自动 encode ,如有需要自己手动 encode
type:Object,
default:function(){
return {
token: 'abcdef12345'
};
}
},
pasteIgnoreImg:{//true的话,禁止粘贴的时候粘过来图片,会被过滤掉
type:Boolean,
default:true
},
colors:{//配置头部的小笔,可以选择的字体颜色种类
type:Array,
default:function(){
return ['#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff']
}
},
emotions:{ //配置头部选择的表情的种类
type:Array,
default:function(){
return [{
// tab 的标题
title: '默认',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 数组
content: [
{
alt: '[坏笑]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji',
// type -> 'emoji' / 'image'
type: 'emoji',
// content -> 数组
content: ['?', '@', '#', '!', '$']
}]
}
},
fontNames:{//头部工具栏的可选的字体的配置
type:Array,
default:function(){
return ['宋体','微软雅黑','Arial','Tahoma','Verdana']
}
}
},
created(){
},
mounted(){
var _this = this;
_this.editor = new wangEditor(this.$refs.myWangEditor);
_this.editor.customConfig = {
//onchange : (html) =>{this.editorContent = html;} ,
uploadImgMaxSize : this.uploadImgMaxSize,
uploadImgMaxLength : this.uploadImgMaxLength ,
uploadFileName : this.uploadFileName ,
withCredentials : this.withCredentials ,
uploadImgTimeout : this.uploadImgTimeout ,
uploadImgServer : this.uploadImgServer ,
uploadImgParams:this.uploadImgParams,
pasteIgnoreImg:this.pasteIgnoreImg,
colors:this.colors,
emotions:this.emotions,
onchange:this.editorChange,
onfocus :this.editorOnfocus ,
onblur :this.editorOnblur
};
this.toListenUp(_this.editor);//监听上传的各个阶段
_this.editor.create();
},
methods:{
toListenUp:function(editor){
var _this = this;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
},
success: function (xhr, editor, result) {
},
fail: function (xhr, editor, result) {
},
error: function (xhr, editor) {
},
timeout: function (xhr, editor) {
},
customInsert: function (insertImg, result, editor) {
var url = result.data[0]
insertImg(url)
}
}
},
editorChange:function(html){//当前编辑器里面的内容什么的发生改变触发的事件
this.$emit("tochange",html);
},
editorOnfocus:function(){//编辑器鼠标聚焦当前容器时触发
this.$emit("tofocus");
},
editorOnblur:function(html){
this.$emit("toblur",html);
},
getHtml:function(){
var html = this.editor.txt.html();
//console.log(html)
this.$emit("getHtml",html);
},
getText:function(){
var text = this.editor.txt.text();
this.$emit("getText",text);
},
closeDialoge:function(){
this.$emit("closeDialoge")
}
}
})
</script>
<style scoped>
</style>