Merge branch 'dev' of https://github.com/JakHuang/form-generator into…

… dev
mrt3389 · Jun 15, 2020 · 6e68889 · 6e68889
2 parents 00205d3 + 193e2af
commit 6e68889
Show file tree

Hide file tree

Showing 25 changed files with 221 additions and 97 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 /dist
 /src/components/parser/lib
 /src/components/render/lib
+/src/components/tinymce/lib
 
 # local env files
 .env.local

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "build:report": "vue-cli-service build --report",
     "build:render": "vue-cli-service build --target lib --name form-gen-render --dest ./src/components/render/lib/ ./src/components/render/render.js",
     "build:parser": "vue-cli-service build --target lib --name form-gen-parser --dest ./src/components/parser/lib/ ./src/components/parser/index.js",
+    "build:tinymce": "vue-cli-service build --target lib --name form-gen-tinymce --dest ./src/components/tinymce/lib/ ./src/components/tinymce/index.js",
     "lint": "vue-cli-service lint",
     "dev": "vue-cli-service serve"
   },

diff --git a/public/index.html b/public/index.html
@@ -76,12 +76,12 @@
       }
     }
   </style>
-  <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
-  <link href="https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs/editor/editor.main.css" rel="stylesheet">
-  <script src="https://cdn.bootcss.com/vue/2.6.10/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
-  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
-  <!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
-  <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
+  <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
+  <link href="https://lib.baomitu.com/monaco-editor/0.19.3/min/vs/editor/editor.main.css" rel="stylesheet">
+  <script src="https://lib.baomitu.com/vue/2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
+  <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
+  <!-- <script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script> -->
+  <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
 </head>
 
 <body>

diff --git a/public/preview.html b/public/preview.html
@@ -6,11 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>form-generator-preview</title>
-    <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
-    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
-    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
-    <!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
-    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
+    <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
+    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
+    <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
+    <!-- <script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script> -->
+    <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
     <style>
       body{
         margin: 0;

diff --git a/src/components/generator/config.js b/src/components/generator/config.js
@@ -143,6 +143,7 @@ export const inputComponents = [
       regList: [],
       document: 'http://tinymce.ax-z.cn'
     },
+    placeholder: '请输入',
     height: 300, // 编辑器高度
     branding: false // 隐藏右下角品牌烙印
   }
@@ -157,7 +158,6 @@ export const selectComponents = [
       labelWidth: null,
       tag: 'el-select',
       tagIcon: 'select',
-      defaultValue: undefined,
       layout: 'colFormItem',
       span: 24,
       required: true,
@@ -513,8 +513,7 @@ export const layoutComponents = [
       tagIcon: 'row',
       label: '行容器',
       layoutTree: true,
-      children: [],
-      document: 'https://element.eleme.cn/#/zh-CN/component/layout'
+      document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
     },
     type: 'default',
     justify: 'start',
@@ -528,7 +527,6 @@ export const layoutComponents = [
       labelWidth: null,
       tag: 'el-button',
       tagIcon: 'button',
-      defaultValue: undefined,
       span: 24,
       layout: 'colFormItem',
       document: 'https://element.eleme.cn/#/zh-CN/component/button'

diff --git a/src/components/generator/html.js b/src/components/generator/html.js
@@ -286,10 +286,10 @@ const tags = {
     return `<${tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}</${tag}>`
   },
   tinymce: el => {
-    const { tag, vModel } = attrBuilder(el)
+    const { tag, vModel, placeholder } = attrBuilder(el)
     const height = el.height ? `:height="${el.height}"` : ''
     const branding = el.branding ? `:branding="${el.branding}"` : ''
-    return `<${tag} ${vModel} ${height} ${branding}></${tag}>`
+    return `<${tag} ${vModel} ${placeholder} ${height} ${branding}></${tag}>`
   }
 }
 

diff --git a/src/components/generator/js.js b/src/components/generator/js.js
@@ -1,5 +1,5 @@
 import { isArray } from 'util'
-import { exportDefault, titleCase } from '@/utils/index'
+import { exportDefault, titleCase, deepClone } from '@/utils/index'
 import ruleTrigger from './ruleTrigger'
 
 const units = {
@@ -19,7 +19,7 @@ const inheritAttrs = {
  * @param {String} type 生成类型，文件或弹窗等
  */
 export function makeUpJs(formConfig, type) {
-  confGlobal = formConfig = JSON.parse(JSON.stringify(formConfig))
+  confGlobal = formConfig = deepClone(formConfig)
   const dataList = []
   const ruleList = []
   const optionsList = []

diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue
@@ -1,4 +1,5 @@
 <script>
+import { deepClone } from '@/utils/index'
 import render from '@/components/render/render.js'
 
 const ruleTrigger = {
@@ -108,7 +109,7 @@ export default {
   },
   data() {
     const data = {
-      formConfCopy: JSON.parse(JSON.stringify(this.formConf)),
+      formConfCopy: deepClone(this.formConf),
       [this.formConf.formModel]: {},
       [this.formConf.formRules]: {}
     }
@@ -147,7 +148,7 @@ export default {
       })
     },
     resetForm() {
-      this.formConfCopy = JSON.parse(JSON.stringify(this.formConf))
+      this.formConfCopy = deepClone(this.formConf)
       this.$refs[this.formConf.formRef].resetFields()
     },
     submitForm() {

diff --git a/src/components/parser/package.json b/src/components/parser/package.json
@@ -21,5 +21,5 @@
   "bugs": {
     "url": "https://github.com/JakHuang/form-generator/issues"
   },
-  "homepage": "https://github.com/JakHuang/form-generator#readme"
+  "homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/parser"
 }
diff --git a/src/components/render/render.js b/src/components/render/render.js
@@ -1,3 +1,5 @@
+import { deepClone } from '@/utils/index'
+
 function vModel(self, dataObject, defaultValue) {
   dataObject.props.value = defaultValue
 
@@ -12,7 +14,7 @@ const componentChild = {}
  * 文件名为key，对应JSON配置中的__config__.tag
  * 文件内容为value，解析JSON配置中的__slot__
  */
-const slotsFiles = require.context('./slots', true, /\.js$/)
+const slotsFiles = require.context('./slots', false, /\.js$/)
 const keys = slotsFiles.keys() || []
 keys.forEach(key => {
   const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
@@ -25,12 +27,14 @@ export default {
     const dataObject = {
       attrs: {},
       props: {},
+      nativeOn: {},
       on: {},
       style: {}
     }
-    const confClone = JSON.parse(JSON.stringify(this.conf))
+    const confClone = deepClone(this.conf)
     const children = []
 
+    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
     const childObjs = componentChild[confClone.__config__.tag]
     if (childObjs) {
       Object.keys(childObjs).forEach(key => {
@@ -41,6 +45,7 @@ export default {
       })
     }
 
+    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
     Object.keys(confClone).forEach(key => {
       const val = confClone[key]
       if (key === '__vModel__') {
@@ -51,8 +56,11 @@ export default {
         dataObject.attrs[key] = val
       }
     })
+
+    // 清理属性
     delete dataObject.attrs.__config__
     delete dataObject.attrs.__slot__
+
     return h(this.conf.__config__.tag, dataObject, children)
   },
   props: ['conf']

diff --git a/src/components/tinymce/README.md b/src/components/tinymce/README.md
@@ -0,0 +1,3 @@
+## 简介
+富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。
+
diff --git a/src/components/tinymce/example/Index.vue 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
@@ -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
@@ -1,10 +1,11 @@
 <template>
-  <textarea :id="tinymceId" class="textarea" />
+  <textarea :id="tinymceId" style="visibility: hidden" />
 </template>
 
 <script>
 import loadTinymce from '@/utils/loadTinymce'
 import { plugins, toolbar } from './config'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { debounce } from 'throttle-debounce'
 
 let num = 1
@@ -19,7 +20,6 @@ export default {
       }
     },
     value: {
-      type: [String, Number, Boolean],
       default: ''
     }
   },
@@ -30,31 +30,33 @@ export default {
   },
   mounted() {
     loadTinymce(tinymce => {
-      import('./zh_CN').then(() => {
-        tinymce.init({
-          selector: `#${this.tinymceId}`,
-          language: 'zh_CN',
-          menubar: 'file edit insert view format table',
-          plugins,
-          toolbar,
-          height: this.$attrs.height || 300,
-          branding: this.$attrs.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,
-          init_instance_callback: editor => {
-            if (this.value) editor.setContent(this.value)
-            this.vModel(editor)
-          }
-        })
-      })
+      // 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() {
@@ -85,9 +87,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.textarea{
-  visibility: hidden;
-}
-</style>
diff --git a/src/components/tinymce/package.json 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/router/index.js b/src/router/index.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '@/views/index/Home.vue'
-import Parser from '@/components/parser/example/Index.vue'
 
 Vue.use(VueRouter)
 
@@ -14,7 +13,12 @@ const routes = [
   {
     path: '/parser',
     name: 'parser',
-    component: Parser
+    component: () => import(/* webpackChunkName: "parser-example" */'@/components/parser/example/Index.vue')
+  },
+  {
+    path: '/tinymce',
+    name: 'tinymce',
+    component: () => import(/* webpackChunkName: "tinymce-example" */'@/components/tinymce/example/Index.vue')
   }
 ]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## 简介
		富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Index from './index.vue'

		export default Index