fix:更换cdn库地址,准备发包vue tinymce

tonly1985 · Jun 14, 2020 · 8f35d5f · 8f35d5f
1 parent ff12d3f
commit 8f35d5f
Show file tree

Hide file tree

Showing 20 changed files with 139 additions and 59 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
@@ -6,6 +6,7 @@
     "build": "vue-cli-service build",
     "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 // 隐藏右下角品牌烙印
   }
@@ -527,7 +528,7 @@ export const layoutComponents = [
       tag: 'el-button',
       tagIcon: 'button',
       span: 24,
-      layout: 'layoutItem',
+      layout: 'colFormItem',
       document: 'https://element.eleme.cn/#/zh-CN/component/button'
     },
     __slot__: {

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/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/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')
   }
 ]
 

diff --git 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
@@ -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
@@ -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/ResourceDialog.vue b/src/views/index/ResourceDialog.vue
@@ -27,7 +27,7 @@
       <el-button-group class="add-item">
         <el-button
           plain
-          @click="addOne('https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js')"
+          @click="addOne('https://lib.baomitu.com/jquery/1.8.3/jquery.min.js')"
         >
           jQuery1.8.3
         </el-button>

diff --git a/src/views/index/RightPanel.vue b/src/views/index/RightPanel.vue
@@ -38,10 +38,10 @@
             {{ activeData.__config__.componentName }}
           </el-form-item>
           <el-form-item v-if="activeData.__config__.label!==undefined" label="标题">
-            <el-input v-model="activeData.__config__.label" placeholder="请输入标题" />
+            <el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey" />
           </el-form-item>
           <el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
-            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
+            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" />
           </el-form-item>
           <el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
             <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
@@ -629,6 +629,9 @@ const dateTimeFormat = {
   datetimerange: 'yyyy-MM-dd HH:mm:ss'
 }
 
+// 使changeRenderKey在目标组件改变时可用
+const needRerenderList = ['tinymce']
+
 export default {
   components: {
     TreeNodeDialog,
@@ -922,7 +925,9 @@ export default {
       this.$emit('tag-change', target)
     },
     changeRenderKey() {
-      this.activeData.__config__.renderKey = +new Date()
+      if (needRerenderList.includes(this.activeData.__config__.tag)) {
+        this.activeData.__config__.renderKey = +new Date()
+      }
     }
   }
 }

diff --git a/src/views/index/main.js b/src/views/index/main.js
@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from '@/router'
 import '@/styles/index.scss'
 import '@/icons'
-import Tinymce from '@/components/tinymce'
+import Tinymce from '@/components/tinymce/index.vue'
 
 Vue.component('tinymce', Tinymce)
 

diff --git a/src/views/preview/main.js b/src/views/preview/main.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { loadScriptQueue } from '@/utils/loadScript'
-import Tinymce from '@/components/tinymce'
+import Tinymce from '@/components/tinymce/index.vue'
 
 Vue.component('tinymce', Tinymce)
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