Skip to content

Commit 8f35d5f

Browse files
JakHuangJakHuang
committedJun 14, 2020
fix:更换cdn库地址,准备发包vue tinymce
1 parent ff12d3f commit 8f35d5f

20 files changed

+139
-59
lines changed
 

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ node_modules
33
/dist
44
/src/components/parser/lib
55
/src/components/render/lib
6+
/src/components/tinymce/lib
67

78
# local env files
89
.env.local

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"build": "vue-cli-service build",
77
"build:render": "vue-cli-service build --target lib --name form-gen-render --dest ./src/components/render/lib/ ./src/components/render/render.js",
88
"build:parser": "vue-cli-service build --target lib --name form-gen-parser --dest ./src/components/parser/lib/ ./src/components/parser/index.js",
9+
"build:tinymce": "vue-cli-service build --target lib --name form-gen-tinymce --dest ./src/components/tinymce/lib/ ./src/components/tinymce/index.js",
910
"lint": "vue-cli-service lint",
1011
"dev": "vue-cli-service serve"
1112
},

‎public/index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,12 @@
7676
}
7777
}
7878
</style>
79-
<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
80-
<link href="https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs/editor/editor.main.css" rel="stylesheet">
81-
<script src="https://cdn.bootcss.com/vue/2.6.10/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
82-
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
83-
<!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
84-
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
79+
<link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
80+
<link href="https://lib.baomitu.com/monaco-editor/0.19.3/min/vs/editor/editor.main.css" rel="stylesheet">
81+
<script src="https://lib.baomitu.com/vue/2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
82+
<script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
83+
<!-- <script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script> -->
84+
<script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
8585
</head>
8686

8787
<body>

‎public/preview.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title>form-generator-preview</title>
9-
<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
10-
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
11-
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
12-
<!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
13-
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
9+
<link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
10+
<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
11+
<script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
12+
<!-- <script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script> -->
13+
<script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
1414
<style>
1515
body{
1616
margin: 0;

‎src/components/generator/config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export const inputComponents = [
143143
regList: [],
144144
document: 'http://tinymce.ax-z.cn'
145145
},
146+
placeholder: '请输入',
146147
height: 300, // 编辑器高度
147148
branding: false // 隐藏右下角品牌烙印
148149
}
@@ -527,7 +528,7 @@ export const layoutComponents = [
527528
tag: 'el-button',
528529
tagIcon: 'button',
529530
span: 24,
530-
layout: 'layoutItem',
531+
layout: 'colFormItem',
531532
document: 'https://element.eleme.cn/#/zh-CN/component/button'
532533
},
533534
__slot__: {

‎src/components/generator/html.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -286,10 +286,10 @@ const tags = {
286286
return `<${tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}</${tag}>`
287287
},
288288
tinymce: el => {
289-
const { tag, vModel } = attrBuilder(el)
289+
const { tag, vModel, placeholder } = attrBuilder(el)
290290
const height = el.height ? `:height="${el.height}"` : ''
291291
const branding = el.branding ? `:branding="${el.branding}"` : ''
292-
return `<${tag} ${vModel} ${height} ${branding}></${tag}>`
292+
return `<${tag} ${vModel} ${placeholder} ${height} ${branding}></${tag}>`
293293
}
294294
}
295295

‎src/components/parser/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,5 @@
2121
"bugs": {
2222
"url": "https://github.com/JakHuang/form-generator/issues"
2323
},
24-
"homepage": "https://github.com/JakHuang/form-generator#readme"
24+
"homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/parser"
2525
}

‎src/components/tinymce/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## 简介
2+
富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。
3+

‎src/components/tinymce/example/Index.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div>
3+
<Tinymce v-model="defaultValue" :height="300" placeholder="在这里输入文字" />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import Tinymce from '../index.vue'
9+
10+
export default {
11+
components: {
12+
Tinymce
13+
},
14+
props: {
15+
16+
},
17+
data() {
18+
return {
19+
defaultValue: '<p>配置文档参阅：http://tinymce.ax-z.cn</p>'
20+
}
21+
},
22+
computed: {
23+
24+
},
25+
watch: {
26+
27+
},
28+
created() {
29+
30+
},
31+
mounted() {
32+
33+
},
34+
methods: {
35+
36+
}
37+
}
38+
</script>

‎src/components/tinymce/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Index from './index.vue'
2+
3+
export default Index

‎src/components/tinymce/index.vue

+29-33
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
2-
<textarea :id="tinymceId" class="textarea" />
2+
<textarea :id="tinymceId" style="visibility: hidden" />
33
</template>
44

55
<script>
66
import loadTinymce from '@/utils/loadTinymce'
77
import { plugins, toolbar } from './config'
8+
// eslint-disable-next-line import/no-extraneous-dependencies
89
import { debounce } from 'throttle-debounce'
910
1011
let num = 1
@@ -19,7 +20,6 @@ export default {
1920
}
2021
},
2122
value: {
22-
type: [String, Number, Boolean],
2323
default: ''
2424
}
2525
},
@@ -30,31 +30,33 @@ export default {
3030
},
3131
mounted() {
3232
loadTinymce(tinymce => {
33-
import('./zh_CN').then(() => {
34-
tinymce.init({
35-
selector: `#${this.tinymceId}`,
36-
language: 'zh_CN',
37-
menubar: 'file edit insert view format table',
38-
plugins,
39-
toolbar,
40-
height: this.$attrs.height || 300,
41-
branding: this.$attrs.branding || false,
42-
object_resizing: false,
43-
end_container_on_empty_block: true,
44-
powerpaste_word_import: 'clean',
45-
code_dialog_height: 450,
46-
code_dialog_width: 1000,
47-
advlist_bullet_styles: 'square',
48-
advlist_number_styles: 'default',
49-
default_link_target: '_blank',
50-
link_title: false,
51-
nonbreaking_force_tab: true,
52-
init_instance_callback: editor => {
53-
if (this.value) editor.setContent(this.value)
54-
this.vModel(editor)
55-
}
56-
})
57-
})
33+
// eslint-disable-next-line global-require
34+
require('./zh_CN')
35+
let conf = {
36+
selector: `#${this.tinymceId}`,
37+
language: 'zh_CN',
38+
menubar: 'file edit insert view format table',
39+
plugins,
40+
toolbar,
41+
height: 300,
42+
branding: false,
43+
object_resizing: false,
44+
end_container_on_empty_block: true,
45+
powerpaste_word_import: 'clean',
46+
code_dialog_height: 450,
47+
code_dialog_width: 1000,
48+
advlist_bullet_styles: 'square',
49+
advlist_number_styles: 'default',
50+
default_link_target: '_blank',
51+
link_title: false,
52+
nonbreaking_force_tab: true
53+
}
54+
conf = Object.assign(conf, this.$attrs)
55+
conf.init_instance_callback = editor => {
56+
if (this.value) editor.setContent(this.value)
57+
this.vModel(editor)
58+
}
59+
tinymce.init(conf)
5860
})
5961
},
6062
destroyed() {
@@ -85,9 +87,3 @@ export default {
8587
}
8688
}
8789
</script>
88-
89-
<style lang="scss" scoped>
90-
.textarea{
91-
visibility: hidden;
92-
}
93-
</style>

‎src/components/tinymce/package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "form-gen-tinymce",
3+
"version": "1.0.0",
4+
"description": "富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。",
5+
"main": "lib/form-gen-tinymce.umd.js",
6+
"directories": {
7+
"example": "example"
8+
},
9+
"scripts": {
10+
"test": "echo \"Error: no test specified\" && exit 1"
11+
},
12+
"repository": {
13+
"type": "git",
14+
"url": "git+https://github.com/JakHuang/form-generator.git"
15+
},
16+
"keywords": [
17+
"tinymce-vue"
18+
],
19+
"dependencies": {
20+
"throttle-debounce": "^2.1.0"
21+
},
22+
"author": "jakHuang",
23+
"license": "MIT",
24+
"bugs": {
25+
"url": "https://github.com/JakHuang/form-generator/issues"
26+
},
27+
"homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/tinymce"
28+
}

‎src/router/index.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Vue from 'vue'
22
import VueRouter from 'vue-router'
33
import Home from '@/views/index/Home.vue'
4-
import Parser from '@/components/parser/example/Index.vue'
54

65
Vue.use(VueRouter)
76

@@ -14,7 +13,12 @@ const routes = [
1413
{
1514
path: '/parser',
1615
name: 'parser',
17-
component: Parser
16+
component: () => import(/* webpackChunkName: "parser-example" */'@/components/parser/example/Index.vue')
17+
},
18+
{
19+
path: '/tinymce',
20+
name: 'tinymce',
21+
component: () => import(/* webpackChunkName: "tinymce-example" */'@/components/tinymce/example/Index.vue')
1822
}
1923
]
2024

‎src/utils/loadBeautifier.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function loadBeautifier(cb) {
1717
background: 'rgba(255, 255, 255, 0.5)'
1818
})
1919

20-
loadScript('https://cdn.bootcss.com/js-beautify/1.10.2/beautifier.min.js', () => {
20+
loadScript('https://lib.baomitu.com/js-beautify/1.10.2/beautifier.min.js', () => {
2121
loading.close()
2222
// eslint-disable-next-line no-undef
2323
beautifierObj = beautifier

‎src/utils/loadMonaco.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function loadMonaco(cb) {
1414
return
1515
}
1616

17-
const vs = 'https://cdn.bootcss.com/monaco-editor/0.18.0/min/vs'
17+
const vs = 'https://lib.baomitu.com/monaco-editor/0.19.3/min/vs'
1818

1919
// 使用element ui实现加载提示
2020
const loading = ELEMENT.Loading.service({

‎src/utils/loadTinymce.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function loadTinymce(cb) {
1717
background: 'rgba(255, 255, 255, 0.5)'
1818
})
1919

20-
loadScript('https://cdn.bootcdn.net/ajax/libs/tinymce/5.2.2/tinymce.min.js', () => {
20+
loadScript('https://lib.baomitu.com/tinymce/5.3.2/tinymce.min.js', () => {
2121
loading.close()
2222
// eslint-disable-next-line no-undef
2323
tinymceObj = tinymce

‎src/views/index/ResourceDialog.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<el-button-group class="add-item">
2828
<el-button
2929
plain
30-
@click="addOne('https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js')"
30+
@click="addOne('https://lib.baomitu.com/jquery/1.8.3/jquery.min.js')"
3131
>
3232
jQuery1.8.3
3333
</el-button>

‎src/views/index/RightPanel.vue

+8-3
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@
3838
{{ activeData.__config__.componentName }}
3939
</el-form-item>
4040
<el-form-item v-if="activeData.__config__.label!==undefined" label="标题">
41-
<el-input v-model="activeData.__config__.label" placeholder="请输入标题" />
41+
<el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey" />
4242
</el-form-item>
4343
<el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
44-
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
44+
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" />
4545
</el-form-item>
4646
<el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
4747
<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
@@ -629,6 +629,9 @@ const dateTimeFormat = {
629629
datetimerange: 'yyyy-MM-dd HH:mm:ss'
630630
}
631631
632+
// 使changeRenderKey在目标组件改变时可用
633+
const needRerenderList = ['tinymce']
634+
632635
export default {
633636
components: {
634637
TreeNodeDialog,
@@ -922,7 +925,9 @@ export default {
922925
this.$emit('tag-change', target)
923926
},
924927
changeRenderKey() {
925-
this.activeData.__config__.renderKey = +new Date()
928+
if (needRerenderList.includes(this.activeData.__config__.tag)) {
929+
this.activeData.__config__.renderKey = +new Date()
930+
}
926931
}
927932
}
928933
}

‎src/views/index/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import App from './App.vue'
33
import router from '@/router'
44
import '@/styles/index.scss'
55
import '@/icons'
6-
import Tinymce from '@/components/tinymce'
6+
import Tinymce from '@/components/tinymce/index.vue'
77

88
Vue.component('tinymce', Tinymce)
99

‎src/views/preview/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22
import { loadScriptQueue } from '@/utils/loadScript'
3-
import Tinymce from '@/components/tinymce'
3+
import Tinymce from '@/components/tinymce/index.vue'
44

55
Vue.component('tinymce', Tinymce)
66

0 commit comments

Comments
 (0)
Please sign in to comment.