tinymec

src/assets/styles/form/home.scss

@@ -254,7 +254,6 @@ $lighterBlue: #4aa0fa;
     }
 }
 .form-name-text:hover {
-    text-align: center;
     border: 1px dashed #7b7b7b;
 }
 .form-name-text {

src/components/tinymce/config.js

@@ -4,5 +4,5 @@ export const plugins = [
     ' autoresize advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars '
 ]
 export const toolbar = [
-    ' styleselect bold italic underline strikethrough undo redo  blockquote removeformat subscript superscript  hr bullist numlist link image charmap preview  pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen '
+    ' styleselect bold italic underline strikethrough undo redo  blockquote removeformat alignleft aligncenter alignright  subscript superscript  hr bullist numlist link image charmap preview  pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen '
 ]

src/components/tinymce/index.vue

@@ -6,6 +6,7 @@
 import loadTinymce from '@/utils/loadTinymce'
 import {plugins, toolbar} from './config'
 import {debounce} from 'throttle-debounce'
+import constants from '@/utils/constants'
 
 let num = 1
 
@@ -29,7 +30,10 @@ export default {
         }
     },
     mounted() {
+
         loadTinymce(tinymce => {
+            let token= this.getUserToken();
+            let uploadUrl= constants.userUploadUrl
             // eslint-disable-next-line global-require
             require('./zh_CN')
             let conf = {
@@ -55,7 +59,31 @@ export default {
                 default_link_target: '_blank',
                 link_title: false,
                 statusbar: false,
-                nonbreaking_force_tab: true
+                nonbreaking_force_tab: true,
+                images_upload_handler: function (blobInfo, succFun, failFun) {
+                    var xhr, formData;
+                    var file = blobInfo.blob();//转化为易于理解的file对象
+                    xhr = new XMLHttpRequest();
+                    xhr.withCredentials = false;
+                    xhr.open('POST', uploadUrl);
+                    xhr.setRequestHeader("token", token);
+                    xhr.onload = function() {
+                        var json;
+                        if (xhr.status != 200) {
+                            failFun('HTTP Error: ' + xhr.status);
+                            return;
+                        }
+                        json = JSON.parse(xhr.responseText);
+                        if (!json || typeof json.data != 'string') {
+                            failFun('Invalid JSON: ' + xhr.responseText);
+                            return;
+                        }
+                        succFun(json.data);
+                    };
+                    formData = new FormData();
+                    formData.append('file', file, file.name );//此处与源文档不一样
+                    xhr.send(formData);
+                }
             }
             conf = Object.assign(conf, this.$attrs)
             conf.init_instance_callback = editor => {
@@ -86,6 +114,9 @@ export default {
                 this.$emit('blur')
             })
         },
+        getUserToken() {
+            return this.$store.getters['user/isLogin']
+        },
         destroyTinymce() {
             if (!window.tinymce) return
             const tinymce = window.tinymce.get(this.tinymceId)

src/utils/constants.js

@@ -3,5 +3,6 @@ export default {
     signSecret: '916lWh2WMcbSWiHv',
     //密码正则
     passwordReg: /^.{6,}$/,
-    passwordRegDesc: '密码最少为6位字符'
+    passwordRegDesc: '密码最少为6位字符',
+    userUploadUrl: `${process.env.VUE_APP_API_ROOT}/user/file/upload`
 }

src/views/form/ProjectForm.vue

@@ -15,9 +15,10 @@
             <h4 class="form-name-text" v-if="projectTheme.showTitle" style="text-align: center">
                 {{ formConf.title }}
             </h4>
-            <p class="form-name-text" v-if="projectTheme.showDescribe" style="text-align: center">
-                {{ formConf.description }}
-            </p>
+            <div
+                v-show="projectTheme.showDescribe"
+                class="form-name-text" v-html="formConf.description" >
+            </div>
             <el-divider>
             </el-divider>
             <parser v-if="startParser" :form-conf="formConf" @submit="submitForm"/>

src/views/form/editor.vue

@@ -46,14 +46,14 @@
                         </el-col>
                     </el-row>
                     <el-row type="flex" justify="center" align="middle">
-                        <el-col :span="23" style="text-align: center">
+                        <el-col :span="23" >
+                                <Tinymce v-model="formConf.description" @input="saveProjectInfo"
+                                         v-if="editDescription"
+                                         @blur="editDescription=false" placeholder="请输入表单描述" />
+                                <div v-else v-html="formConf.description" class="form-name-text"
+                                     @click="editDescription=true" style="min-height: 100px">
 
-                            <Tinymce v-model="formConf.description" @input="saveProjectInfo"
-                                     v-if="editDescription"
-                                     @blur="editDescription=false" placeholder="请输入表单描述" />
-                            <div v-else v-html="formConf.description" @click="editDescription=true">
-
-                            </div>
+                                </div>
 <!--                            <p class="form-name-text" contenteditable="true"-->
 <!--                               @blur="(event)=>{-->
 <!--                                   formConf.description=event.target.innerText;-->

src/views/redirect.vue

@@ -13,8 +13,6 @@ export default {
     created() {
         // 重定向类型
         let type = this.$route.params.type
-        // eslint-disable-next-line no-debugger
-        debugger
         if (type == 'qqlogin') {
             this.qqLoginHandle()
         } else if (type == 'bindqq') {
@@ -36,36 +34,36 @@ export default {
                     }
                 })
             }
-        }
-    },
-    qqLoginHandle() {
-        // qq 登录重定向
-        let code = getQueryString('code')
-        let state = getQueryString('state')
-        if (code && state) {
-            let reUrl = getCurrentDomain() + '/redirect/qqlogin'
-            this.$api.post('/login/qq', {authorizeCode: code, redirectUri: reUrl}).then(res => {
-                if (res.data) {
-                    this.msgSuccess('登录成功')
-                    this.$store.dispatch('user/login', res.data).then(() => {
-                        // 重置状态
-                        this.$store.dispatch('global/loginExpired', false).then(() => {
-                        })
-                        // 登录成功后路由跳回
-                        if (this.$route.query.redirect) {
-                            this.$router.replace({
-                                path: this.$route.query.redirect
+        },
+        qqLoginHandle() {
+            // qq 登录重定向
+            let code = getQueryString('code')
+            let state = getQueryString('state')
+            if (code && state) {
+                let reUrl = getCurrentDomain() + '/redirect/qqlogin'
+                this.$api.post('/login/qq', {authorizeCode: code, redirectUri: reUrl}).then(res => {
+                    if (res.data) {
+                        this.msgSuccess('登录成功')
+                        this.$store.dispatch('user/login', res.data).then(() => {
+                            // 重置状态
+                            this.$store.dispatch('global/loginExpired', false).then(() => {
                             })
-                        } else {
-                            if (window.history.length <= 1) {
-                                this.$router.push({path: '/home'})
+                            // 登录成功后路由跳回
+                            if (this.$route.query.redirect) {
+                                this.$router.replace({
+                                    path: this.$route.query.redirect
+                                })
                             } else {
-                                this.$router.push({path: '/home'})
+                                if (window.history.length <= 1) {
+                                    this.$router.push({path: '/home'})
+                                } else {
+                                    this.$router.push({path: '/home'})
+                                }
                             }
-                        }
-                    })
-                }
-            })
+                        })
+                    }
+                })
+            }
         }
     }
 }