1
2
npm install jquery --save

1
2
import 'jquery'

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
<template>
<div class="clearfix">
<!-- 富文本编辑框 -->
<div id="wangEditorElem" style="height:210px;background: #ffffff;" />
</div>
</template>
<script>
import E from 'wangeditor'
import $ from 'jquery'
export default {
name: 'WangEditor',
props: {
content: {
type: String,
required: true
}
},
data() {
return {
wEditor: '',
name: ''
}
},
// 用来回显内容（监控父组件中content变化）
watch: {
content: function(newVal, oldVal) {
this.wEditor.txt.html(newVal)
}
},
mounted() {
// wangeditor
this.wEditor = new E('#wangEditorElem')
// 上传图片到服务器，base64形式
// this.wEditor.customConfig.uploadImgShowBase64 = true
this.wEditor.customConfig.uploadFileName = 'myFile'
this.wEditor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
// 上传文件个数
this.wEditor.customConfig.uploadImgMaxLength = 3
// 绑定上传图片的后端地址
this.wEditor.customConfig.uploadImgServer = 'upload.do'
// 隐藏网络图片
this.wEditor.customConfig.showLinkImg = false
this.wEditor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'foreColor', // 文字颜色
'quote', // 引用
'image', // 插入图片
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
this.wEditor.customConfig.uploadImgHooks = {
fail: function(xhr, editor, result) {
this.$message.error('上传图片失败')
},
error: function(xhr, editor) {
this.$message.error('上传图片出错')
},
timeout: function(xhr, editor) {
this.$message.error('上传图片超时')
},
// 自定义上传图片，回显图片
customInsert: function(insertImg, result, editor) {
var url = result.data
// url 是后台返回的上传图片的路径
insertImg(url)
}
}
// 创建一个富文本编辑器
this.wEditor.create()
// 全屏
$('#wangEditorElem' + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="javascript:window.toggleFullscreen('' + '#wangEditorElem' + '')">全屏</a></div>')
// 富文本内容
this.wEditor.txt.html(this.content)
window['toggleFullscreen'] = data => {
this.toggleFullscreen(data)
}
},
methods: {
toggleFullscreen: function(editorSelector) {
$(editorSelector).toggleClass('fullscreen-editor')
if ($(editorSelector + ' ._wangEditor_btn_fullscreen').text() === '全屏') {
$(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏')
} else {
$(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏')
}
},
// 获取编辑器中内容
getContent() {
return this.wEditor.txt.html()
},
setContent() {
this.wEditor.txt.html(this.content)
},
clearContent() {
this.wEditor.txt.clear()
}
}
}
</script>
<style>
.w-e-menu{
z-index: 2 !important;
}
.w-e-text-container {
/* 只有加上 ！important设置样式才管用 */
height: 300px !important;
z-index: 1 !important;
}
.w-e-toolbar {
flex-wrap: wrap;
-webkit-box-lines: multiple;
}
.w-e-toolbar .w-e-menu:hover{
z-index: 10002!important;
}
.w-e-menu a {
text-decoration: none;
}
.fullscreen-editor {
position: fixed !important;
width: 100% !important;
height: 100% !important;
left: 0px !important;
top: 0px !important;
background-color: white;
z-index: 9999;
}
.fullscreen-editor .w-e-text-container {
width: 100% !important;
height: 95% !important;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div>
<WE ref="we" :content="content" style="height:350px" />
</div>
<script>
import WE from '@/components/wangEditor'
export default {
name: 'editor',
components: {
WE
},
data() {
return {
content: ''
}
}
}
</script>