Skip to content

Commit 07b9ef2

Browse files
YunaiVYunaiV
committed
mp：引入 wx-editor 组件
1 parent e78e4e9 commit 07b9ef2

File tree

4 files changed

+235
-7
lines changed

4 files changed

+235
-7
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"vue-count-to": "1.0.13",
6666
"vue-cropper": "0.5.8",
6767
"vue-meta": "^2.4.0",
68+
"vue-quill-editor": "^3.0.6",
6869
"vue-router": "3.4.9",
6970
"vue-video-player": "^5.0.2",
7071
"vuedraggable": "2.24.3",

‎src/views/mp/components/wx-editor/WxEditor.vue

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<!--
2+
- Copyright (C) 2018-2019
3+
- All rights reserved, Designed By www.joolun.com
4+
-->
5+
<template>
6+
<div id="wxEditor">
7+
<div v-loading="quillUpdateImg" element-loading-text="请稍等，图片上传中">
8+
<!-- 图片上传组件辅助-->
9+
<el-upload class="avatar-uploader" name="file" :action="serverUrl" :headers="header"
10+
:show-file-list="false" :data="uploadData"
11+
:on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
12+
</el-upload>
13+
<quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"
14+
@change="onEditorChange($event)">
15+
</quill-editor>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
// 工具栏配置
22+
const toolbarOptions = [
23+
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
24+
["blockquote", "code-block"], // 引用 代码块
25+
[{ header: 1 }, { header: 2 }], // 1、2 级标题
26+
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
27+
[{ script: "sub" }, { script: "super" }], // 上标/下标
28+
[{ indent: "-1" }, { indent: "+1" }], // 缩进
29+
// [{'direction': 'rtl'}], // 文本方向
30+
[{ size: ["small", false, "large", "huge"] }], // 字体大小
31+
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
32+
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
33+
[{ font: [] }], // 字体种类
34+
[{ align: [] }], // 对齐方式
35+
["clean"], // 清除文本格式
36+
["link", "image", "video"] // 链接、图片、视频
37+
]
38+
39+
import { quillEditor } from "vue-quill-editor"
40+
import "quill/dist/quill.core.css"
41+
import "quill/dist/quill.snow.css"
42+
import "quill/dist/quill.bubble.css"
43+
import { getAccessToken } from "@/utils/auth";
44+
45+
export default {
46+
props: {
47+
uploadData: {
48+
type: Object
49+
},
50+
/*编辑器的内容*/
51+
value: {
52+
type: String
53+
},
54+
/*图片大小*/
55+
maxSize: {
56+
type: Number,
57+
default: 4000 // kb
58+
}
59+
},
60+
name: 'wxEditor',
61+
components: {
62+
quillEditor
63+
},
64+
data() {
65+
return {
66+
editorType: '1',
67+
content: this.value.replace(/data-src/g, "src"),
68+
69+
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
70+
editorOption: {
71+
theme: "snow", // or 'bubble'
72+
placeholder: "请输入文章内容",
73+
modules: {
74+
toolbar: {
75+
container: toolbarOptions,
76+
// container: "#toolbar",
77+
handlers: {
78+
image: function(value) {
79+
if (value) {
80+
// 触发input框选择图片文件
81+
document.querySelector(".avatar-uploader input").click();
82+
} else {
83+
this.quill.format("image", false);
84+
}
85+
},
86+
link: function(value) {
87+
if (value) {
88+
const href = prompt('注意！只支持公众号图文链接');
89+
this.quill.format("link", href);
90+
} else {
91+
this.quill.format("link", false);
92+
}
93+
},
94+
}
95+
}
96+
}
97+
},
98+
serverUrl: process.env.VUE_APP_BASE_API +'/wxmaterial/newsImgUpload', // 这里写你要上传的图片服务器地址
99+
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
100+
}
101+
},
102+
methods: {
103+
onEditorChange(editor) {
104+
//内容改变事件
105+
this.$emit("input", this.content)
106+
},
107+
108+
// 富文本图片上传前
109+
beforeUpload() {
110+
// 显示loading动画
111+
this.quillUpdateImg = true
112+
},
113+
114+
uploadSuccess(res, file) {
115+
// res为图片服务器返回的数据
116+
// 获取富文本组件实例
117+
let quill = this.$refs.myQuillEditor.quill
118+
// 如果上传成功
119+
if(res.link){
120+
// 获取光标所在位置
121+
let length = quill.getSelection().index;
122+
// 插入图片 res.info为服务器返回的图片地址
123+
quill.insertEmbed(length, 'image', res.link)
124+
// 调整光标到最后
125+
quill.setSelection(length + 1)
126+
} else {
127+
this.$message.error('图片插入失败')
128+
}
129+
// loading动画消失
130+
this.quillUpdateImg = false;
131+
},
132+
// 富文本图片上传失败
133+
uploadError() {
134+
// loading动画消失
135+
this.quillUpdateImg = false;
136+
this.$message.error("图片插入失败");
137+
}
138+
}
139+
}
140+
</script>
141+
142+
<style>
143+
.editor {
144+
line-height: normal !important;
145+
height: 500px;
146+
}
147+
.ql-snow .ql-tooltip[data-mode=link]::before {
148+
content: "请输入链接地址:";
149+
}
150+
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
151+
border-right: 0;
152+
content: '保存';
153+
padding-right: 0;
154+
}
155+
156+
.ql-snow .ql-tooltip[data-mode=video]::before {
157+
content: "请输入视频地址:";
158+
}
159+
160+
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
161+
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
162+
content: '14px';
163+
}
164+
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
165+
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
166+
content: '10px';
167+
}
168+
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
169+
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
170+
content: '18px';
171+
}
172+
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
173+
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
174+
content: '32px';
175+
}
176+
177+
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
178+
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
179+
content: '文本';
180+
}
181+
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
182+
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
183+
content: '标题1';
184+
}
185+
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
186+
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
187+
content: '标题2';
188+
}
189+
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
190+
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
191+
content: '标题3';
192+
}
193+
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
194+
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
195+
content: '标题4';
196+
}
197+
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
198+
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
199+
content: '标题5';
200+
}
201+
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
202+
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
203+
content: '标题6';
204+
}
205+
206+
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
207+
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
208+
content: '标准字体';
209+
}
210+
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
211+
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
212+
content: '衬线字体';
213+
}
214+
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
215+
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
216+
content: '等宽字体';
217+
}
218+
</style>
219+

‎src/views/mp/draft/index.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ SOFTWARE.
117117
<div class="right" v-loading="addMaterialLoading" v-if="articlesAdd.length > 0">
118118
<!--富文本编辑器组件-->
119119
<el-row>
120-
<WxEditor v-model="articlesAdd[isActiveAddNews].content" :uploadData="uploadData"
120+
<wx-editor v-model="articlesAdd[isActiveAddNews].content" :uploadData="uploadData"
121121
v-if="hackResetEditor"/>
122122
</el-row>
123123
<br><br><br><br>
@@ -162,17 +162,17 @@ SOFTWARE.
162162

163163
<script>
164164
// import { getPage as getPage1 } from '@/api/wxmp/wxmaterial'
165-
// import WxEditor from '@/components/Editor/WxEditor.vue'
165+
import WxEditor from '@/views/mp/components/wx-editor/WxEditor.vue';
166166
import WxNews from '@/views/mp/components/wx-news/main.vue';
167167
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
168168
import { getAccessToken } from '@/utils/auth'
169-
import {createDraft, getDraftPage} from "@/api/mp/draft";
170-
import {getSimpleAccounts} from "@/api/mp/account";
169+
import { createDraft, getDraftPage } from "@/api/mp/draft";
170+
import { getSimpleAccounts } from "@/api/mp/account";
171171
172172
export default {
173173
name: 'mpDraft',
174174
components: {
175-
// WxEditor,
175+
WxEditor,
176176
WxNews,
177177
WxMaterialSelect
178178
},
@@ -234,7 +234,7 @@ export default {
234234
this.setAccountId(this.accounts[0].id);
235235
}
236236
// 加载数据
237-
// this.getList();
237+
// this.getList(); // TODO 芋艿：开发完，放出来
238238
})
239239
},
240240
methods: {

‎yarn.lock

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8410,7 +8410,7 @@
84108410
"extend" "^3.0.2"
84118411
"fast-diff" "1.1.2"
84128412

8413-
"[email protected]":
8413+
"quill@^1.3.4", "quill@1.3.7":
84148414
"integrity" "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g=="
84158415
"resolved" "https://registry.npmmirror.com/quill/-/quill-1.3.7.tgz"
84168416
"version" "1.3.7"
@@ -10479,6 +10479,14 @@
1047910479
dependencies:
1048010480
"deepmerge" "^4.2.2"
1048110481

10482+
"vue-quill-editor@^3.0.6":
10483+
"integrity" "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ=="
10484+
"resolved" "https://registry.npmmirror.com/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz"
10485+
"version" "3.0.6"
10486+
dependencies:
10487+
"object-assign" "^4.1.1"
10488+
"quill" "^1.3.4"
10489+
1048210490
"[email protected]":
1048310491
"integrity" "sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA=="
1048410492
"resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-3.4.9.tgz"

0 commit comments

Comments
 (0)