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
| <template>
| <div class="editor">
| <div ref="toolbar" class="toolbar" :class="showTop">
| </div>
| <div ref="editor" class="text">
| </div>
| </div>
| </template>
|
| <script>
| import E from 'wangeditor'
| // import {uploadNew,downloadNew} from '@/api/upload';
| // import defaultUrl from "@/api/defaultUrl";
| export default {
| name: 'editoritem',
| data() {
| return {
| // uploadPath,
| editor: null,
| info_: null,
| // defaultUrl:defaultUrl,
| defaultUrl:'',
| }
| },
| model: {
| prop: 'value',
| event: 'change'
| },
| props: {
| value: {
| type: String,
| default: ''
| },
| isClear: {
| type: Boolean,
| default: false
| },
| showTop: {
| type: String,
| default: ''
| },
| },
| watch: {
| isClear(val) {
| // 触发清除文本域内容
| if (val) {
| this.editor.txt.clear()
| this.info_ = null
| }
| },
| value: function(value) {
| if (value !== this.editor.txt.html()) {
| this.editor.txt.html(this.value)
| }
| }
| //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
| },
| mounted() {
| var that =this
| that.setEditor()
| that.editor.txt.html(that.value)
| },
| methods: {
| setEditor() {
| var that =this
| this.editor = new E(this.$refs.toolbar, this.$refs.editor)
| // 配置菜单
| this.editor.config.menus = [
| 'head', // 标题
| 'bold', // 粗体
| 'fontSize', // 字号
| 'fontName', // 字体
| 'italic', // 斜体
| 'underline', // 下划线
| 'strikeThrough', // 删除线
| 'foreColor', // 文字颜色
| 'backColor', // 背景颜色
| 'link', // 插入链接
| 'list', // 列表
| 'justify', // 对齐方式
| 'quote', // 引用
| 'emoticon', // 表情
| // 'image', // 插入图片
| 'table', // 表格
| // 'video', // 插入视频
| 'code', // 插入代码
| 'undo', // 撤销
| 'redo' // 重复
| ]
|
| //配置上传图片
| this.editor.config.uploadImgShowBase64 = false // base 64 存储图片
| this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址
| this.editor.config.uploadImgHeaders = { }// 自定义 header
| this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
| this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
| this.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片
| this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
| this.editor.config.uploadImgHooks = {
| fail: (xhr, editor, result) => {
| // 插入图片失败回调
| },
| success: (xhr, editor, result) => {
| // 图片上传成功回调
| },
| timeout: (xhr, editor) => {
| // 网络超时的回调
| },
| error: (xhr, editor) => {
| // 图片上传错误的回调
| },
| customInsert: (insertImg, result, editor) => {
| // 图片上传成功，插入图片的回调
| //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
| // console.log(result.data[0].url)
| //insertImg()为插入图片的函数
| //循环插入图片
| // for (let i = 0; i < 1; i++) {
| // console.log(result)
| let url = "http://otp.cdinfotech.top"+result.url
| insertImg(url)
| // }
| }
| }
| this.editor.config.customUploadImg = function (files, insert) {
| let form = new FormData();
| form.append('file', files[0]);
| form.append('dir', 'temp1')
| // uploadNew(form).then(res=>{
| // if(res.result){
| // let url = that.defaultUrl+`/upload/downloadNew?path=`+encodeURI(res.data.fileUrl)
| // insert(url)
| // that.$message("上传成功", 'success');
| // }else {
| // that.$message.error("上传失败");
| // }
| //
| // })
| }
|
| this.editor.config.onchange = (html) => {
| this.info_ = html // 绑定当前逐渐地值
| this.$emit('change', this.info_) // 将内容同步到父组件中
| }
| // 创建富文本编辑器
| this.editor.create()
| //是否可编辑
| if (this.showTop=='hiddenClass'){
| this.editor.disable()
| }
| }
| }
| }
| </script>
|
| <style scoped>
| .editor {
| /*margin: 0 auto;*/
| position: relative;
| z-index: 100;
| }
| .toolbar {
| width: 100%;
| border: 1px solid #ccc;
| }
| .text {
| border: 1px solid #ccc;
| min-height: 250px;
| }
| .hiddenClass{
| display: none;
|
| }
| </style>
|
|
