|
@@ -23,8 +23,11 @@
|
23
|
23
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
24
|
24
|
</el-upload>
|
25
|
25
|
</el-form-item>
|
26
|
|
- <el-form-item label="链接地址">
|
|
26
|
+ <!-- <el-form-item label="链接地址">
|
27
|
27
|
<el-input v-model="dynamic.url"></el-input>
|
|
28
|
+ </el-form-item> -->
|
|
29
|
+ <el-form-item label="内容">
|
|
30
|
+ <div id="websiteEditorElem" style="height: 400px"></div>
|
28
|
31
|
</el-form-item>
|
29
|
32
|
<el-form-item>
|
30
|
33
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
|
@@ -36,9 +39,11 @@
|
36
|
39
|
<script>
|
37
|
40
|
import { createNamespacedHelpers } from 'vuex'
|
38
|
41
|
import apis from '../../config/api'
|
|
42
|
+import E from 'wangeditor'
|
39
|
43
|
|
40
|
44
|
const { mapState: mapDynamicState, mapActions: mapDynamicActions, mapMutations: mapDynamicMutations } = createNamespacedHelpers('dynamic')
|
41
|
45
|
const { mapState: mapBuildingState, mapActions: mapBuildingActions } = createNamespacedHelpers('building')
|
|
46
|
+const { mapActions: mapImgActions } = createNamespacedHelpers('img')
|
42
|
47
|
|
43
|
48
|
export default {
|
44
|
49
|
data () {
|
|
@@ -74,6 +79,9 @@ export default {
|
74
|
79
|
'addDynamics',
|
75
|
80
|
'editDynamics'
|
76
|
81
|
]),
|
|
82
|
+ ...mapImgActions([
|
|
83
|
+ 'uploadImg'
|
|
84
|
+ ]),
|
77
|
85
|
beforeImgUpload (file) {
|
78
|
86
|
if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
|
79
|
87
|
this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
|
|
@@ -118,12 +126,44 @@ export default {
|
118
|
126
|
}
|
119
|
127
|
},
|
120
|
128
|
mounted () {
|
|
129
|
+ const _that = this
|
|
130
|
+ const phoneEditor = new E('#websiteEditorElem')
|
|
131
|
+ phoneEditor.customConfig.onchange = function (html) {
|
|
132
|
+ _that.detail = {..._that.detail, url: html}
|
|
133
|
+ }
|
|
134
|
+ // phoneEditor.customConfig.uploadImgServer = this.upFileUrl
|
|
135
|
+ // phoneEditor.customConfig.uploadFileName = 'uploadFiles'
|
|
136
|
+
|
|
137
|
+ phoneEditor.customConfig.customUploadImg = function (files, insert) {
|
|
138
|
+ _that.uploadImg({
|
|
139
|
+ uploadFiles: files[0]
|
|
140
|
+ }).then(data => {
|
|
141
|
+ insert(data[0])
|
|
142
|
+ })
|
|
143
|
+ }
|
|
144
|
+ phoneEditor.customConfig.menus = [
|
|
145
|
+ 'head', // 标题
|
|
146
|
+ 'bold', // 粗体
|
|
147
|
+ 'fontSize', // 字号
|
|
148
|
+ 'fontName', // 字体
|
|
149
|
+ 'italic', // 斜体
|
|
150
|
+ 'underline', // 下划线
|
|
151
|
+ 'strikeThrough', // 删除线
|
|
152
|
+ 'foreColor', // 文字颜色
|
|
153
|
+ 'backColor', // 背景颜色
|
|
154
|
+ 'justify', // 对齐方式
|
|
155
|
+ 'image', // 插入图片
|
|
156
|
+ ]
|
|
157
|
+ phoneEditor.create()
|
|
158
|
+
|
121
|
159
|
this.getBuildings({
|
122
|
160
|
pageNum: 1,
|
123
|
161
|
pageSize: 100,
|
124
|
162
|
}).then(() => {
|
125
|
163
|
if ((this.$route.query.id || '') !== '') {
|
126
|
|
- this.getDetail({id: this.$route.query.id})
|
|
164
|
+ this.getDetail({id: this.$route.query.id}).then((data) => {
|
|
165
|
+ phoneEditor.txt.html(data.url)
|
|
166
|
+ })
|
127
|
167
|
}
|
128
|
168
|
})
|
129
|
169
|
}
|