From fa4b44748da02da874b463a3632440353b8e404d Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Wed, 18 Nov 2020 18:42:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=A1=A8=E5=8D=95=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintignore                            |   1 +
 .stylelintignore                         |   1 +
 src/api/index.js                         |   1 -
 src/assets/styles/home.scss              |  25 +-
 src/components/generator/config.js       |  23 +-
 src/components/tinymce/README.md         |   3 +
 src/components/tinymce/config.js         |   8 +
 src/components/tinymce/example/Index.vue |  38 ++
 src/components/tinymce/index.js          |   3 +
 src/components/tinymce/index.vue         |  89 +++++
 src/components/tinymce/package.json      |  28 ++
 src/components/tinymce/zh_CN.js          | 420 +++++++++++++++++++++++
 src/utils/index.js                       |  14 +
 src/utils/loadTinymce.js                 |  26 ++
 src/views/form/index.vue                 |  42 ++-
 src/views/project/create.vue             |   2 +-
 16 files changed, 696 insertions(+), 28 deletions(-)
 create mode 100644 src/components/tinymce/README.md
 create mode 100644 src/components/tinymce/config.js
 create mode 100644 src/components/tinymce/example/Index.vue
 create mode 100644 src/components/tinymce/index.js
 create mode 100644 src/components/tinymce/index.vue
 create mode 100644 src/components/tinymce/package.json
 create mode 100644 src/components/tinymce/zh_CN.js
 create mode 100644 src/utils/loadTinymce.js

diff --git a/.eslintignore b/.eslintignore
index b46a6ea..f563a2c 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,3 +6,4 @@ vue.config.js
 src/utils/sign.js
 src/views/form/
 src/utils/
+src/components/parser
diff --git a/.stylelintignore b/.stylelintignore
index a19b94c..21cc331 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -5,3 +5,4 @@ src/theme/
 src/utils/sign.js
 src/views/form/
 src/utils/
+src/components/parser
diff --git a/src/api/index.js b/src/api/index.js
index 081d3e0..6d2403f 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -75,7 +75,6 @@ api.interceptors.response.use(
          * 则代码如下
          */
         const res = response.data
-        console.log(res)
         if (res.code === 200) {
             return Promise.resolve(res)
         } else if (res.code === 500) {
diff --git a/src/assets/styles/home.scss b/src/assets/styles/home.scss
index 5852634..bdc7415 100644
--- a/src/assets/styles/home.scss
+++ b/src/assets/styles/home.scss
@@ -51,9 +51,12 @@ $lighterBlue: #409eff;
     width: 260px;
     position: absolute;
     left: 0;
-    top: 0;
+    top: 20px;
     height: 100vh;
 }
+.el-menu.el-menu--horizontal {
+    border-bottom: none;
+}
 .left-scrollbar {
     //height: calc(100vh - 42px);
     height: calc(100vh - 142px);
@@ -67,9 +70,11 @@ $lighterBlue: #409eff;
 .center-scrollbar {
     height: calc(100vh - 42px);
     overflow: hidden;
-    border-left: 1px solid #f1e8e8;
-    border-right: 1px solid #f1e8e8;
+    //border-left: 1px solid #f1e8e8;
+    //border-right: 1px solid #f1e8e8;
+    margin: 3px;
     box-sizing: border-box;
+    border: 2px solid rgba(255, 255, 255, 100);
 }
 .center-board {
     height: 100vh;
@@ -274,12 +279,22 @@ $lighterBlue: #409eff;
         }
     }
 }
-.form-name-title:hover {
+.form-name-text:hover {
     text-align: center;
     border: 1px dashed #7b7b7b;
 }
-.form-name-title {
+.form-name-text {
+    padding: 6px 10px;
     border: 1px dashed transparent;
     width: 80%;
     line-height: 30px;
 }
+.form-name-text input {
+    border: none;
+    background-color: transparent;
+}
+[contenteditable]:focus {
+    outline: none;
+    background-color: #f4f4f4;
+    border: 1px solid #f4f4f4;
+}
diff --git a/src/components/generator/config.js b/src/components/generator/config.js
index 3d79226..e7adf07 100644
--- a/src/components/generator/config.js
+++ b/src/components/generator/config.js
@@ -9,13 +9,16 @@ export const formConf = {
     gutter: 15,
     disabled: false,
     span: 24,
+    title: '问卷名称',
+    description: '为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位\n' +
+        '用户的宝贵意见，期待您的参与！现在我们就马上开始吧！',
     formBtns: true
 }
 
 // 输入型组件 【左面板】
 export const inputComponents = [
     {
-    // 组件的自定义配置
+        // 组件的自定义配置
         __config__: {
             label: '单行文本',
             labelWidth: null,
@@ -38,7 +41,7 @@ export const inputComponents = [
         },
         // 其余的为可直接写在组件标签上的属性
         placeholder: '请输入',
-        style: { width: '100%' },
+        style: {width: '100%'},
         clearable: true,
         'prefix-icon': '',
         'suffix-icon': '',
@@ -68,7 +71,7 @@ export const inputComponents = [
             minRows: 4,
             maxRows: 4
         },
-        style: { width: '100%' },
+        style: {width: '100%'},
         maxlength: null,
         'show-word-limit': false,
         readonly: false,
@@ -95,7 +98,7 @@ export const inputComponents = [
         },
         placeholder: '请输入',
         'show-password': true,
-        style: { width: '100%' },
+        style: {width: '100%'},
         clearable: true,
         'prefix-icon': '',
         'suffix-icon': '',
@@ -175,7 +178,7 @@ export const selectComponents = [
             }]
         },
         placeholder: '请选择',
-        style: { width: '100%' },
+        style: {width: '100%'},
         clearable: true,
         disabled: false,
         filterable: false,
@@ -211,7 +214,7 @@ export const selectComponents = [
             }]
         }],
         placeholder: '请选择',
-        style: { width: '100%' },
+        style: {width: '100%'},
         props: {
             props: {
                 multiple: false,
@@ -350,7 +353,7 @@ export const selectComponents = [
             document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
         },
         placeholder: '请选择',
-        style: { width: '100%' },
+        style: {width: '100%'},
         disabled: false,
         clearable: true,
         'picker-options': {
@@ -374,7 +377,7 @@ export const selectComponents = [
             changeTag: true,
             document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
         },
-        style: { width: '100%' },
+        style: {width: '100%'},
         disabled: false,
         clearable: true,
         'is-range': true,
@@ -401,7 +404,7 @@ export const selectComponents = [
         },
         placeholder: '请选择',
         type: 'date',
-        style: { width: '100%' },
+        style: {width: '100%'},
         disabled: false,
         clearable: true,
         format: 'yyyy-MM-dd',
@@ -423,7 +426,7 @@ export const selectComponents = [
             changeTag: true,
             document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
         },
-        style: { width: '100%' },
+        style: {width: '100%'},
         type: 'daterange',
         'range-separator': '至',
         'start-placeholder': '开始日期',
diff --git a/src/components/tinymce/README.md b/src/components/tinymce/README.md
new file mode 100644
index 0000000..65c01e2
--- /dev/null
+++ b/src/components/tinymce/README.md
@@ -0,0 +1,3 @@
+## 简介
+富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。
+
diff --git a/src/components/tinymce/config.js b/src/components/tinymce/config.js
new file mode 100644
index 0000000..c9ae848
--- /dev/null
+++ b/src/components/tinymce/config.js
@@ -0,0 +1,8 @@
+/* eslint-disable max-len */
+
+export const plugins = [
+    '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 wordcount'
+]
+export const toolbar = [
+    'code searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
+]
diff --git a/src/components/tinymce/example/Index.vue b/src/components/tinymce/example/Index.vue
new file mode 100644
index 0000000..36c836c
--- /dev/null
+++ b/src/components/tinymce/example/Index.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <Tinymce v-model="defaultValue" :height="300" placeholder="在这里输入文字" />
+    </div>
+</template>
+
+<script>
+import Tinymce from '../index.vue'
+
+export default {
+    components: {
+        Tinymce
+    },
+    props: {
+
+    },
+    data() {
+        return {
+            defaultValue: '<p>配置文档参阅：http://tinymce.ax-z.cn</p>'
+        }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    }
+}
+</script>
diff --git a/src/components/tinymce/index.js b/src/components/tinymce/index.js
new file mode 100644
index 0000000..1e83179
--- /dev/null
+++ b/src/components/tinymce/index.js
@@ -0,0 +1,3 @@
+import Index from './index.vue'
+
+export default Index
diff --git a/src/components/tinymce/index.vue b/src/components/tinymce/index.vue
new file mode 100644
index 0000000..ef29d6d
--- /dev/null
+++ b/src/components/tinymce/index.vue
@@ -0,0 +1,89 @@
+<template>
+    <textarea :id="tinymceId" style="visibility: hidden;" />
+</template>
+
+<script>
+import loadTinymce from '@/utils/loadTinymce'
+import {plugins, toolbar} from './config'
+import {debounce} from 'throttle-debounce'
+
+let num = 1
+
+export default {
+    name: 'Tinymce',
+    props: {
+        id: {
+            type: String,
+            default: () => {
+                num === 10000 && (num = 1)
+                return `tinymce${+new Date()}${num++}`
+            }
+        },
+        value: {
+            default: ''
+        }
+    },
+    data() {
+        return {
+            tinymceId: this.id
+        }
+    },
+    mounted() {
+        loadTinymce(tinymce => {
+            // eslint-disable-next-line global-require
+            require('./zh_CN')
+            let conf = {
+                selector: `#${this.tinymceId}`,
+                language: 'zh_CN',
+                menubar: 'file edit insert view format table',
+                plugins,
+                toolbar,
+                height: 300,
+                branding: false,
+                object_resizing: false,
+                end_container_on_empty_block: true,
+                powerpaste_word_import: 'clean',
+                code_dialog_height: 450,
+                code_dialog_width: 1000,
+                advlist_bullet_styles: 'square',
+                advlist_number_styles: 'default',
+                default_link_target: '_blank',
+                link_title: false,
+                nonbreaking_force_tab: true
+            }
+            conf = Object.assign(conf, this.$attrs)
+            conf.init_instance_callback = editor => {
+                if (this.value) editor.setContent(this.value)
+                this.vModel(editor)
+            }
+            tinymce.init(conf)
+        })
+    },
+    destroyed() {
+        this.destroyTinymce()
+    },
+    methods: {
+        vModel(editor) {
+            // 控制连续写入时setContent的触发频率
+            const debounceSetContent = debounce(250, editor.setContent)
+            this.$watch('value', (val, prevVal) => {
+                if (editor && val !== prevVal && val !== editor.getContent()) {
+                    if (typeof val !== 'string') val = val.toString()
+                    debounceSetContent.call(editor, val)
+                }
+            })
+
+            editor.on('change keyup undo redo', () => {
+                this.$emit('input', editor.getContent())
+            })
+        },
+        destroyTinymce() {
+            if (!window.tinymce) return
+            const tinymce = window.tinymce.get(this.tinymceId)
+            if (tinymce) {
+                tinymce.destroy()
+            }
+        }
+    }
+}
+</script>
diff --git a/src/components/tinymce/package.json b/src/components/tinymce/package.json
new file mode 100644
index 0000000..3d2d2d4
--- /dev/null
+++ b/src/components/tinymce/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "form-gen-tinymce",
+  "version": "1.0.0",
+  "description": "富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。",
+  "main": "lib/form-gen-tinymce.umd.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JakHuang/form-generator.git"
+  },
+  "keywords": [
+    "tinymce-vue"
+  ],
+  "dependencies": {
+    "throttle-debounce": "^2.1.0"
+  },
+  "author": "jakHuang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JakHuang/form-generator/issues"
+  },
+  "homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/tinymce"
+}
diff --git a/src/components/tinymce/zh_CN.js b/src/components/tinymce/zh_CN.js
new file mode 100644
index 0000000..4f494d6
--- /dev/null
+++ b/src/components/tinymce/zh_CN.js
@@ -0,0 +1,420 @@
+/* eslint-disable */
+tinymce.addI18n('zh_CN',{
+"Redo": "\u91cd\u505a",
+"Undo": "\u64a4\u9500",
+"Cut": "\u526a\u5207",
+"Copy": "\u590d\u5236",
+"Paste": "\u7c98\u8d34",
+"Select all": "\u5168\u9009",
+"New document": "\u65b0\u6587\u4ef6",
+"Ok": "\u786e\u5b9a",
+"Cancel": "\u53d6\u6d88",
+"Visual aids": "\u7f51\u683c\u7ebf",
+"Bold": "\u7c97\u4f53",
+"Italic": "\u659c\u4f53",
+"Underline": "\u4e0b\u5212\u7ebf",
+"Strikethrough": "\u5220\u9664\u7ebf",
+"Superscript": "\u4e0a\u6807",
+"Subscript": "\u4e0b\u6807",
+"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
+"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
+"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
+"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
+"Justify": "\u4e24\u7aef\u5bf9\u9f50",
+"Bullet list": "\u9879\u76ee\u7b26\u53f7",
+"Numbered list": "\u7f16\u53f7\u5217\u8868",
+"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
+"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
+"Close": "\u5173\u95ed",
+"Formats": "\u683c\u5f0f",
+"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
+"Headers": "\u6807\u9898",
+"Header 1": "\u6807\u98981",
+"Header 2": "\u6807\u98982",
+"Header 3": "\u6807\u98983",
+"Header 4": "\u6807\u98984",
+"Header 5": "\u6807\u98985",
+"Header 6": "\u6807\u98986",
+"Headings": "\u6807\u9898",
+"Heading 1": "\u6807\u98981",
+"Heading 2": "\u6807\u98982",
+"Heading 3": "\u6807\u98983",
+"Heading 4": "\u6807\u98984",
+"Heading 5": "\u6807\u98985",
+"Heading 6": "\u6807\u98986",
+"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
+"Div": "Div",
+"Pre": "Pre",
+"Code": "\u4ee3\u7801",
+"Paragraph": "\u6bb5\u843d",
+"Blockquote": "\u5f15\u6587\u533a\u5757",
+"Inline": "\u6587\u672c",
+"Blocks": "\u57fa\u5757",
+"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
+"Fonts": "\u5b57\u4f53",
+"Font Sizes": "\u5b57\u53f7",
+"Class": "\u7c7b\u578b",
+"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
+"OR": "\u6216",
+"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
+"Upload": "\u4e0a\u4f20",
+"Block": "\u5757",
+"Align": "\u5bf9\u9f50",
+"Default": "\u9ed8\u8ba4",
+"Circle": "\u7a7a\u5fc3\u5706",
+"Disc": "\u5b9e\u5fc3\u5706",
+"Square": "\u65b9\u5757",
+"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
+"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
+"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
+"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Anchor...": "\u951a\u70b9...",
+"Name": "\u540d\u79f0",
+"Id": "\u6807\u8bc6\u7b26",
+"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
+"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
+"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
+"Special character...": "\u7279\u6b8a\u5b57\u7b26...",
+"Source code": "\u6e90\u4ee3\u7801",
+"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
+"Language": "\u8bed\u8a00",
+"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
+"Color Picker": "\u9009\u8272\u5668",
+"R": "R",
+"G": "G",
+"B": "B",
+"Left to right": "\u4ece\u5de6\u5230\u53f3",
+"Right to left": "\u4ece\u53f3\u5230\u5de6",
+"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
+"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
+"Title": "\u6807\u9898",
+"Keywords": "\u5173\u952e\u8bcd",
+"Description": "\u63cf\u8ff0",
+"Robots": "\u673a\u5668\u4eba",
+"Author": "\u4f5c\u8005",
+"Encoding": "\u7f16\u7801",
+"Fullscreen": "\u5168\u5c4f",
+"Action": "\u64cd\u4f5c",
+"Shortcut": "\u5feb\u6377\u952e",
+"Help": "\u5e2e\u52a9",
+"Address": "\u5730\u5740",
+"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
+"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
+"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
+"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
+"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
+"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
+"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
+"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
+"Plugins": "\u63d2\u4ef6",
+"Handy Shortcuts": "\u5feb\u6377\u952e",
+"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
+"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
+"Image description": "\u56fe\u7247\u63cf\u8ff0",
+"Source": "\u5730\u5740",
+"Dimensions": "\u5927\u5c0f",
+"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
+"General": "\u666e\u901a",
+"Advanced": "\u9ad8\u7ea7",
+"Style": "\u6837\u5f0f",
+"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
+"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
+"Border": "\u8fb9\u6846",
+"Insert image": "\u63d2\u5165\u56fe\u7247",
+"Image...": "\u56fe\u7247...",
+"Image list": "\u56fe\u7247\u5217\u8868",
+"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
+"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
+"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
+"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
+"Edit image": "\u7f16\u8f91\u56fe\u7247",
+"Image options": "\u56fe\u7247\u9009\u9879",
+"Zoom in": "\u653e\u5927",
+"Zoom out": "\u7f29\u5c0f",
+"Crop": "\u88c1\u526a",
+"Resize": "\u8c03\u6574\u5927\u5c0f",
+"Orientation": "\u65b9\u5411",
+"Brightness": "\u4eae\u5ea6",
+"Sharpen": "\u9510\u5316",
+"Contrast": "\u5bf9\u6bd4\u5ea6",
+"Color levels": "\u989c\u8272\u5c42\u6b21",
+"Gamma": "\u4f3d\u9a6c\u503c",
+"Invert": "\u53cd\u8f6c",
+"Apply": "\u5e94\u7528",
+"Back": "\u540e\u9000",
+"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
+"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
+"Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Text to display": "\u663e\u793a\u6587\u5b57",
+"Url": "\u5730\u5740",
+"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
+"Current window": "\u5f53\u524d\u7a97\u53e3",
+"None": "\u65e0",
+"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
+"Remove link": "\u5220\u9664\u94fe\u63a5",
+"Anchors": "\u951a\u70b9",
+"Link...": "\u94fe\u63a5...",
+"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
+"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
+"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
+"Link list": "\u94fe\u63a5\u5217\u8868",
+"Insert video": "\u63d2\u5165\u89c6\u9891",
+"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
+"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
+"Alternative source": "\u955c\u50cf",
+"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
+"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
+"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
+"Embed": "\u5185\u5d4c",
+"Media...": "\u591a\u5a92\u4f53...",
+"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
+"Page break": "\u5206\u9875\u7b26",
+"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
+"Preview": "\u9884\u89c8",
+"Print...": "\u6253\u5370...",
+"Save": "\u4fdd\u5b58",
+"Find": "\u67e5\u627e",
+"Replace with": "\u66ff\u6362\u4e3a",
+"Replace": "\u66ff\u6362",
+"Replace all": "\u5168\u90e8\u66ff\u6362",
+"Previous": "\u4e0a\u4e00\u4e2a",
+"Next": "\u4e0b\u4e00\u4e2a",
+"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
+"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
+"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
+"Find whole words only": "\u5168\u5b57\u5339\u914d",
+"Spell check": "\u62fc\u5199\u68c0\u67e5",
+"Ignore": "\u5ffd\u7565",
+"Ignore all": "\u5168\u90e8\u5ffd\u7565",
+"Finish": "\u5b8c\u6210",
+"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
+"Insert table": "\u63d2\u5165\u8868\u683c",
+"Table properties": "\u8868\u683c\u5c5e\u6027",
+"Delete table": "\u5220\u9664\u8868\u683c",
+"Cell": "\u5355\u5143\u683c",
+"Row": "\u884c",
+"Column": "\u5217",
+"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
+"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
+"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
+"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
+"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
+"Delete row": "\u5220\u9664\u884c",
+"Row properties": "\u884c\u5c5e\u6027",
+"Cut row": "\u526a\u5207\u884c",
+"Copy row": "\u590d\u5236\u884c",
+"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
+"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
+"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
+"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
+"Delete column": "\u5220\u9664\u5217",
+"Cols": "\u5217",
+"Rows": "\u884c",
+"Width": "\u5bbd",
+"Height": "\u9ad8",
+"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
+"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
+"Show caption": "\u663e\u793a\u6807\u9898",
+"Left": "\u5de6\u5bf9\u9f50",
+"Center": "\u5c45\u4e2d",
+"Right": "\u53f3\u5bf9\u9f50",
+"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
+"Scope": "\u8303\u56f4",
+"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
+"H Align": "\u6c34\u5e73\u5bf9\u9f50",
+"V Align": "\u5782\u76f4\u5bf9\u9f50",
+"Top": "\u9876\u90e8\u5bf9\u9f50",
+"Middle": "\u5782\u76f4\u5c45\u4e2d",
+"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
+"Header cell": "\u8868\u5934\u5355\u5143\u683c",
+"Row group": "\u884c\u7ec4",
+"Column group": "\u5217\u7ec4",
+"Row type": "\u884c\u7c7b\u578b",
+"Header": "\u8868\u5934",
+"Body": "\u8868\u4f53",
+"Footer": "\u8868\u5c3e",
+"Border color": "\u8fb9\u6846\u989c\u8272",
+"Insert template...": "\u63d2\u5165\u6a21\u677f...",
+"Templates": "\u6a21\u677f",
+"Template": "\u6a21\u677f",
+"Text color": "\u6587\u5b57\u989c\u8272",
+"Background color": "\u80cc\u666f\u8272",
+"Custom...": "\u81ea\u5b9a\u4e49...",
+"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
+"No color": "\u65e0",
+"Remove color": "\u79fb\u9664\u989c\u8272",
+"Table of Contents": "\u5185\u5bb9\u5217\u8868",
+"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
+"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
+"Word count": "\u5b57\u6570",
+"Count": "\u8ba1\u6570",
+"Document": "\u6587\u6863",
+"Selection": "\u9009\u62e9",
+"Words": "\u5355\u8bcd",
+"Words: {0}": "\u5b57\u6570\uff1a{0}",
+"{0} words": "{0} \u5b57",
+"File": "\u6587\u4ef6",
+"Edit": "\u7f16\u8f91",
+"Insert": "\u63d2\u5165",
+"View": "\u89c6\u56fe",
+"Format": "\u683c\u5f0f",
+"Table": "\u8868\u683c",
+"Tools": "\u5de5\u5177",
+"Powered by {0}": "\u7531{0}\u9a71\u52a8",
+"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
+"Image title": "\u56fe\u7247\u6807\u9898",
+"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
+"Border style": "\u8fb9\u6846\u6837\u5f0f",
+"Error": "\u9519\u8bef",
+"Warn": "\u8b66\u544a",
+"Valid": "\u6709\u6548",
+"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
+"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
+"System Font": "\u7cfb\u7edf\u5b57\u4f53",
+"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
+"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
+"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
+"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
+"example": "\u793a\u4f8b",
+"Search": "\u641c\u7d22",
+"All": "\u5168\u90e8",
+"Currency": "\u8d27\u5e01",
+"Text": "\u6587\u5b57",
+"Quotations": "\u5f15\u7528",
+"Mathematical": "\u6570\u5b66",
+"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
+"Symbols": "\u7b26\u53f7",
+"Arrows": "\u7bad\u5934",
+"User Defined": "\u81ea\u5b9a\u4e49",
+"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
+"currency sign": "\u8d27\u5e01\u7b26\u53f7",
+"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
+"colon sign": "\u5192\u53f7",
+"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
+"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
+"lira sign": "\u91cc\u62c9\u7b26\u53f7",
+"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
+"naira sign": "\u5948\u62c9\u7b26\u53f7",
+"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
+"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
+"won sign": "\u97e9\u5143\u7b26\u53f7",
+"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
+"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
+"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
+"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
+"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
+"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
+"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
+"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
+"austral sign": "\u6fb3\u5143\u7b26\u53f7",
+"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
+"cedi sign": "\u585e\u5730\u7b26\u53f7",
+"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
+"spesmilo sign": "spesmilo\u7b26\u53f7",
+"tenge sign": "\u575a\u6208\u7b26\u53f7",
+"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
+"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
+"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
+"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
+"ruble sign": "\u5362\u5e03\u7b26\u53f7",
+"yen character": "\u65e5\u5143\u5b57\u6837",
+"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
+"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
+"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
+"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
+"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
+"People": "\u4eba\u7c7b",
+"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
+"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
+"Activity": "\u6d3b\u52a8",
+"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
+"Objects": "\u7269\u4ef6",
+"Flags": "\u65d7\u5e1c",
+"Characters": "\u5b57\u7b26",
+"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
+"{0} characters": "{0} \u4e2a\u5b57\u7b26",
+"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
+"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
+"Update": "\u66f4\u65b0",
+"Color swatch": "\u989c\u8272\u6837\u672c",
+"Turquoise": "\u9752\u7eff\u8272",
+"Green": "\u7eff\u8272",
+"Blue": "\u84dd\u8272",
+"Purple": "\u7d2b\u8272",
+"Navy Blue": "\u6d77\u519b\u84dd",
+"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
+"Dark Green": "\u6df1\u7eff\u8272",
+"Medium Blue": "\u4e2d\u84dd\u8272",
+"Medium Purple": "\u4e2d\u7d2b\u8272",
+"Midnight Blue": "\u6df1\u84dd\u8272",
+"Yellow": "\u9ec4\u8272",
+"Orange": "\u6a59\u8272",
+"Red": "\u7ea2\u8272",
+"Light Gray": "\u6d45\u7070\u8272",
+"Gray": "\u7070\u8272",
+"Dark Yellow": "\u6697\u9ec4\u8272",
+"Dark Orange": "\u6df1\u6a59\u8272",
+"Dark Red": "\u6df1\u7ea2\u8272",
+"Medium Gray": "\u4e2d\u7070\u8272",
+"Dark Gray": "\u6df1\u7070\u8272",
+"Light Green": "\u6d45\u7eff\u8272",
+"Light Yellow": "\u6d45\u9ec4\u8272",
+"Light Red": "\u6d45\u7ea2\u8272",
+"Light Purple": "\u6d45\u7d2b\u8272",
+"Light Blue": "\u6d45\u84dd\u8272",
+"Dark Purple": "\u6df1\u7d2b\u8272",
+"Dark Blue": "\u6df1\u84dd\u8272",
+"Black": "\u9ed1\u8272",
+"White": "\u767d\u8272",
+"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
+"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
+"history": "\u5386\u53f2",
+"styles": "\u6837\u5f0f",
+"formatting": "\u683c\u5f0f\u5316",
+"alignment": "\u5bf9\u9f50",
+"indentation": "\u7f29\u8fdb",
+"permanent pen": "\u8bb0\u53f7\u7b14",
+"comments": "\u5907\u6ce8",
+"Format Painter": "\u683c\u5f0f\u5237",
+"Insert\/edit iframe": "\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6",
+"Capitalization": "\u5927\u5199",
+"lowercase": "\u5c0f\u5199",
+"UPPERCASE": "\u5927\u5199",
+"Title Case": "\u9996\u5b57\u6bcd\u5927\u5199",
+"Permanent Pen Properties": "\u6c38\u4e45\u7b14\u5c5e\u6027",
+"Permanent pen properties...": "\u6c38\u4e45\u7b14\u5c5e\u6027...",
+"Font": "\u5b57\u4f53",
+"Size": "\u5b57\u53f7",
+"More...": "\u66f4\u591a...",
+"Spellcheck Language": "\u62fc\u5199\u68c0\u67e5\u8bed\u8a00",
+"Select...": "\u9009\u62e9...",
+"Preferences": "\u9996\u9009\u9879",
+"Yes": "\u662f",
+"No": "\u5426",
+"Keyboard Navigation": "\u952e\u76d8\u6307\u5f15",
+"Version": "\u7248\u672c",
+"Anchor": "\u951a\u70b9",
+"Special character": "\u7279\u6b8a\u7b26\u53f7",
+"Code sample": "\u4ee3\u7801\u793a\u4f8b",
+"Color": "\u989c\u8272",
+"Emoticons": "\u8868\u60c5",
+"Document properties": "\u6587\u6863\u5c5e\u6027",
+"Image": "\u56fe\u7247",
+"Insert link": "\u63d2\u5165\u94fe\u63a5",
+"Target": "\u6253\u5f00\u65b9\u5f0f",
+"Link": "\u94fe\u63a5",
+"Poster": "\u5c01\u9762",
+"Media": "\u5a92\u4f53",
+"Print": "\u6253\u5370",
+"Prev": "\u4e0a\u4e00\u4e2a",
+"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
+"Whole words": "\u5168\u5b57\u5339\u914d",
+"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
+"Caption": "\u6807\u9898",
+"Insert template": "\u63d2\u5165\u6a21\u677f"
+});
\ No newline at end of file
diff --git a/src/utils/index.js b/src/utils/index.js
index ebb8dae..37ec907 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -141,3 +141,17 @@ export function deepClone(obj) {
 
     return result
 }
+
+export function uuid() {
+    let s = [];
+    let hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
+    s[8] = s[13] = s[18] = s[23] = "-";
+
+    let uuid = s.join("");
+    return uuid;
+}
diff --git a/src/utils/loadTinymce.js b/src/utils/loadTinymce.js
new file mode 100644
index 0000000..ca0e585
--- /dev/null
+++ b/src/utils/loadTinymce.js
@@ -0,0 +1,26 @@
+import loadScript from './loadScript'
+import ELEMENT from 'element-ui'
+
+let tinymceObj
+
+export default function loadTinymce(cb) {
+  if (tinymceObj) {
+    cb(tinymceObj)
+    return
+  }
+
+  const loading = ELEMENT.Loading.service({
+    fullscreen: true,
+    lock: true,
+    text: '富文本资源加载中...',
+    spinner: 'el-icon-loading',
+    background: 'rgba(255, 255, 255, 0.5)'
+  })
+
+  loadScript('https://lib.baomitu.com/tinymce/5.3.2/tinymce.min.js', () => {
+    loading.close()
+    // eslint-disable-next-line no-undef
+    tinymceObj = tinymce
+    cb(tinymceObj)
+  })
+}
diff --git a/src/views/form/index.vue b/src/views/form/index.vue
index f94c5b0..96447cc 100644
--- a/src/views/form/index.vue
+++ b/src/views/form/index.vue
@@ -9,6 +9,14 @@
 <!--                    </a>-->
 <!--                </div>-->
 <!--            </div>-->
+            <el-row>
+                <el-col :offset="1" :span="2">
+                    <el-button size="mini" round @click="$router.back(-1)">
+                        <i class="el-icon-arrow-left" />
+                        返回
+                    </el-button>
+                </el-col>
+            </el-row>
             <el-scrollbar class="left-scrollbar">
                 <div class="components-list">
                     <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
@@ -61,18 +69,31 @@
 <!--                </el-button>-->
 <!--            </div>-->
             <el-scrollbar class="center-scrollbar">
-                <el-row type="flex" justify="center" align="middle">
-                    <el-col :span="20" style="text-align: center">
-                        <h4  class="form-name-title"
-                             >问卷名称</h4>
-                    </el-col>
+                <el-row type="flex" align="middle" justify="justify">
+                   <el-col :span="18" :offset="6">
+                       <el-menu default-active="1" style="background-color: transparent" mode="horizontal">
+                           <el-menu-item index="1">编辑</el-menu-item>
+                           <el-menu-item index="2">外观</el-menu-item>
+                           <el-menu-item index="3">设置</el-menu-item>
+                           <el-menu-item index="4">发布</el-menu-item>
+                           <el-menu-item index="5">统计</el-menu-item>
+                       </el-menu>
+                   </el-col>
                 </el-row>
-                <el-row type="flex" justify="center" align="middle">
-                    <el-col :span="24" style="text-align: center">为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位
-                        用户的宝贵意见，期待您的参与！现在我们就马上开始吧！</el-col>
-                </el-row>
-                <el-divider></el-divider>
                 <el-row class="center-board-row" :gutter="formConf.gutter">
+                    <el-row type="flex" justify="center" align="middle">
+                        <el-col :span="20" style="text-align: center">
+                            <h4  class="form-name-text" contenteditable="true" @input="(event)=>{formConf.title=event.target.innerText}">{{formConf.title}}</h4>
+                        </el-col>
+                    </el-row>
+                    <el-row type="flex" justify="center" align="middle">
+                        <el-col :span="20" style="text-align: center">
+                            <p  class="form-name-text" contenteditable="true" @input="(event)=>{formConf.description=event.target.innerText}">
+                                {{formConf.description}}
+                            </p>
+                        </el-col>
+                    </el-row>
+                    <el-divider></el-divider>
                     <el-form
                         :size="formConf.size"
                         :label-position="formConf.labelPosition"
@@ -283,7 +304,6 @@ export default {
     },
     methods: {
         activeFormItem(currentItem) {
-            console.log(currentItem)
             this.activeData = currentItem
             this.activeId = currentItem.__config__.formId
         },
diff --git a/src/views/project/create.vue b/src/views/project/create.vue
index c13da94..26d5085 100644
--- a/src/views/project/create.vue
+++ b/src/views/project/create.vue
@@ -5,7 +5,7 @@
             <el-row style="height: 20px;" />
             <el-row>
                 <el-col :offset="1" :span="2">
-                    <el-button size="mini" round>
+                    <el-button size="mini" round @click="$router.back(-1)">
                         <i class="el-icon-arrow-left" />
                         返回
                     </el-button>