diff --git a/.gitignore b/.gitignore index e3a24303..be6d57bc 100644 --- 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 index 47a726f5..b6d75c60 100644 --- 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 index 364ffde2..ce9b6212 100644 --- a/public/index.html +++ b/public/index.html @@ -76,12 +76,12 @@ } } - - - - - - + + + + + + diff --git a/public/preview.html b/public/preview.html index 8e43983c..2be02e56 100644 --- a/public/preview.html +++ b/public/preview.html @@ -6,11 +6,11 @@ form-generator-preview - - - - - + + + + + diff --git a/src/components/tinymce/package.json b/src/components/tinymce/package.json new file mode 100644 index 00000000..3d2d2d4b --- /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/router/index.js b/src/router/index.js index 00686244..e7fa9ce9 100644 --- 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') } ] diff --git a/src/utils/index.js b/src/utils/index.js index dd03aea5..7069c72e 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,3 +1,6 @@ +/* eslint-disable no-nested-ternary */ +/* eslint-disable no-restricted-syntax */ +/* eslint-disable guard-for-in */ /** * num 小于0，左缩进num*2个空格； 大于0，右缩进num*2个空格。 * @param {string} str 代码 @@ -100,3 +103,41 @@ function parse(str) { export function jsonClone(obj) { return parse(stringify(obj)) } + +// 深拷贝对象 +export function deepClone(obj) { + const _toString = Object.prototype.toString + + // null, undefined, non-object, function + if (!obj || typeof obj !== 'object') { + return obj + } + + // DOM Node + if (obj.nodeType && 'cloneNode' in obj) { + return obj.cloneNode(true) + } + + // Date + if (_toString.call(obj) === '[object Date]') { + return new Date(obj.getTime()) + } + + // RegExp + if (_toString.call(obj) === '[object RegExp]') { + const flags = [] + if (obj.global) { flags.push('g') } + if (obj.multiline) { flags.push('m') } + if (obj.ignoreCase) { flags.push('i') } + + return new RegExp(obj.source, flags.join('')) + } + + const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {} + + for (const key in obj) { + result[key] = deepClone(obj[key]) + } + + return result +} diff --git a/src/utils/loadBeautifier.js b/src/utils/loadBeautifier.js index 001bbabb..a3bef88f 100644 --- a/src/utils/loadBeautifier.js +++ b/src/utils/loadBeautifier.js @@ -17,7 +17,7 @@ export default function loadBeautifier(cb) { background: 'rgba(255, 255, 255, 0.5)' }) - loadScript('https://cdn.bootcss.com/js-beautify/1.10.2/beautifier.min.js', () => { + loadScript('https://lib.baomitu.com/js-beautify/1.10.2/beautifier.min.js', () => { loading.close() // eslint-disable-next-line no-undef beautifierObj = beautifier diff --git a/src/utils/loadMonaco.js b/src/utils/loadMonaco.js index a15bfbdd..14fc1d03 100644 --- a/src/utils/loadMonaco.js +++ b/src/utils/loadMonaco.js @@ -14,7 +14,7 @@ export default function loadMonaco(cb) { return } - const vs = 'https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs' + const vs = 'https://lib.baomitu.com/monaco-editor/0.19.3/min/vs' // 使用element ui实现加载提示 const loading = ELEMENT.Loading.service({ diff --git a/src/utils/loadTinymce.js b/src/utils/loadTinymce.js index 969cece7..ca0e585b 100644 --- a/src/utils/loadTinymce.js +++ b/src/utils/loadTinymce.js @@ -17,7 +17,7 @@ export default function loadTinymce(cb) { background: 'rgba(255, 255, 255, 0.5)' }) - loadScript('https://cdn.bootcdn.net/ajax/libs/tinymce/5.2.2/tinymce.min.js', () => { + loadScript('https://lib.baomitu.com/tinymce/5.3.2/tinymce.min.js', () => { loading.close() // eslint-disable-next-line no-undef tinymceObj = tinymce diff --git a/src/views/index/Home.vue b/src/views/index/Home.vue index fbde34e5..decbf48d 100644 --- a/src/views/index/Home.vue +++ b/src/views/index/Home.vue @@ -133,7 +133,7 @@ import { inputComponents, selectComponents, layoutComponents, formConf } from '@/components/generator/config' import { - exportDefault, beautifierConf, isNumberStr, titleCase + exportDefault, beautifierConf, isNumberStr, titleCase, deepClone } from '@/utils/index' import { makeUpHtml, vueTemplate, vueScript, cssStyle @@ -283,24 +283,33 @@ export default { this.activeFormItem(clone) }, cloneComponent(origin) { - const clone = JSON.parse(JSON.stringify(origin)) + const clone = deepClone(origin) const config = clone.__config__ + config.span = this.formConf.span // 生成代码时，会根据span做精简判断 + this.createIdAndKey(clone) + clone.placeholder !== undefined && (clone.placeholder += config.label) + tempActiveData = clone + return tempActiveData + }, + createIdAndKey(item) { + const config = item.__config__ config.formId = ++this.idGlobal - config.span = this.formConf.span config.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件 if (config.layout === 'colFormItem') { - clone.__vModel__ = `field${this.idGlobal}` - clone.placeholder !== undefined && (clone.placeholder += config.label) + item.__vModel__ = `field${this.idGlobal}` } else if (config.layout === 'rowFormItem') { config.componentName = `row${this.idGlobal}` - config.gutter = this.formConf.gutter + !Array.isArray(config.children) && (config.children = []) + delete config.label // rowFormItem无需配置label属性 } - tempActiveData = clone - return tempActiveData + if (Array.isArray(config.children)) { + config.children = config.children.map(childItem => this.createIdAndKey(childItem)) + } + return item }, AssembleFormData() { this.formData = { - fields: JSON.parse(JSON.stringify(this.drawingList)), + fields: deepClone(this.drawingList), ...this.formConf } }, @@ -330,25 +339,11 @@ export default { ) }, drawingItemCopy(item, parent) { - let clone = JSON.parse(JSON.stringify(item)) + let clone = deepClone(item) clone = this.createIdAndKey(clone) parent.push(clone) this.activeFormItem(clone) }, - createIdAndKey(item) { - const config = item.__config__ - config.formId = ++this.idGlobal - config.renderKey = +new Date() - if (config.layout === 'colFormItem') { - item.__vModel__ = `field${this.idGlobal}` - } else if (config.layout === 'rowFormItem') { - config.componentName = `row${this.idGlobal}` - } - if (Array.isArray(config.children)) { - config.children = config.children.map(childItem => this.createIdAndKey(childItem)) - } - return item - }, drawingItemDelete(index, parent) { parent.splice(index, 1) this.$nextTick(() => { @@ -416,7 +411,7 @@ export default { } }, refreshJson(data) { - this.drawingList = JSON.parse(JSON.stringify(data.fields)) + this.drawingList = deepClone(data.fields) delete data.fields this.formConf = data } diff --git a/src/views/index/ResourceDialog.vue b/src/views/index/ResourceDialog.vue index 38f72b69..e9a2c92d 100644 --- a/src/views/index/ResourceDialog.vue +++ b/src/views/index/ResourceDialog.vue @@ -27,7 +27,7 @@ jQuery1.8.3 @@ -60,6 +60,8 @@