xg

src/api/system/wangEditor.js

@@ -6,4 +6,13 @@ export function labelFieldList(fieldType) {
         url: `/manage/labelfieldinfo/labelFieldList?fieldType=${fieldType}`,
         method: 'get',
     })
+}
+
+//上传图片
+export function richTextPictureUrl(data) {
+    return request({
+        url: `/common/richTextPictureUrl`,
+        method: 'post',
+        data
+    })
 }

src/views/system/components/message.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left"
+    <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
       :style="handleselectName ? 'color:black' : 'color:#C0C4CC'">{{ handleselectName ? handleselectName : '选择短信模板'
       }}</el-button>
     <el-dialog title="短信库模板选择" :visible.sync="classificationOpen" width="70%" :before-close="classificationOpenfalse">

src/views/system/components/miniProgram.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-container">
-        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left"
+        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
             :style="handleselectName ? 'color:black' : 'color:#C0C4CC'">{{ handleselectName ? handleselectName :
                 '选择公众号模板' }}</el-button>
         <el-dialog title="公众号模板选择" :visible.sync="classificationOpen" width="70%"

src/views/system/components/officialAccount.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="app-container">
-        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left"
+        <el-button size="small" @click="classificationOpen = true"
+            style="width: 200px;font-size:14px;text-align:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
             :style="handleselectName ? 'color:black' : 'color:#C0C4CC'">{{ handleselectName ? handleselectName :
                 '选择公众号模板' }}</el-button>
         <el-dialog title="公众号模板选择" :visible.sync="classificationOpen" width="70%"

src/views/system/components/propaganda.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-container">
-        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left"
+        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
             :style="handleselectName ? 'color:black' : 'color:#C0C4CC'">{{ handleselectName ? handleselectName :
                 '选择宣教模板' }}</el-button>
         <el-dialog title="宣教库模板选择" :visible.sync="classificationOpen" width="70%"

src/views/system/components/question.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-container">
-        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left"
+        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
             :style="handleselectName ? 'color:black' : 'color:#C0C4CC'">{{ handleselectName ? handleselectName :
                 '选择问卷模板' }}</el-button>
         <el-dialog title="问卷库模板选择" :visible.sync="classificationOpen" width="70%"

src/views/system/components/script.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-container">
-        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left"
+        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
             :style="handleselectName ? 'color:black' : 'color:#C0C4CC'">{{ handleselectName ? handleselectName :
                 '请选择'
             }}</el-button>

src/views/system/components/wangEditor.vue

@@ -34,7 +34,8 @@ import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { Boot } from '@wangeditor/editor'
 import { h, VNode } from 'snabbdom'
 import {
-    labelFieldList
+    labelFieldList,
+    richTextPictureUrl
 } from '@/api/system/wangEditor.js'
 // import menuConf from "./ModalMenu";
 import { getToken } from "@/utils/auth";
@@ -63,7 +64,10 @@ export default ({
                     'codeBlock',
                     'todo',
                     'insertVideo',
-                    'insertImage'
+                    'insertImage',
+                    "emotion",
+                    "divider",
+                    "insertTable",
                 ],
             },
             editorConfig: {
@@ -81,9 +85,12 @@ export default ({
                             }
                         },
                     },
+                    uploadVideo: {  //上传视频配置
+                        customUpload: this.handleUpload
+                    },
                 },
             },
-            mode: 'simple', // or 'simple'
+            mode: 'default', // or 'simple'
             timer: '',
             html: `<p></p>`,
             addnode: {
@@ -95,6 +102,22 @@ export default ({
         }
     },
     methods: {
+        async handleUpload(file, insertFn) {
+            let form = new FormData();
+            form.append('file', file);
+            let res = await this.uploadFile(form);  //此方法返回上传后的id
+            console.log(res)
+            const videoUrl = URL.createObjectURL(file);
+            // this.content += '<video  poster=\"\"  controls=\"true\" width=\"auto\" height=\"auto\"><source src=\"'+ res +'\" type=\"video/mp4\"/></video>'
+            // 这快需要注意一下，我这res返回这快，应该是后端返回一个预览服务的url，才能直接在富文本，以及后续展示的地方展示这个视频
+            this.html += '<video  poster=\"\"  controls=\"true\" width=\"auto\" height=\"auto\"><source src=\"' + process.env.VUE_APP_BASE_API + res.fileName + '\" type=\"video/mp4\"/></video>'
+            // 如果没有预览服务可以让后端写一下下载接口，然后在这里直接拼，但是这个接口前缀最好使用项目中接口配置的前缀
+        },
+        async uploadFile(form) {
+            let res = await richTextPictureUrl(form);   //此处换为自己的上传接口地址
+            console.log(res)
+            return res
+        },
         emit() {
             this.$emit("on-nodeContent", { nodeContent: this.html });
         },
@@ -212,7 +235,6 @@ export default ({
     },
     watch: {
         nodeContent(newValue, oldValue) {
-            console.log(newValue, oldValue)
             this.html = newValue;
         }
     },