Commit 1093ec3e6e4fe1f49b7458c29e518744fe56532f
1 parent
bc6214cd
fix(tinymce): fixed multiple editors showing only one (#83)
Showing
3 changed files
with
15 additions
and
8 deletions
CHANGELOG.zh_CN.md
build/vite/plugin/dynamicImport/index.ts
@@ -34,7 +34,6 @@ const dynamicImportTransform = function (env: any = {}): Transform { | @@ -34,7 +34,6 @@ const dynamicImportTransform = function (env: any = {}): Transform { | ||
34 | export default function (id) { | 34 | export default function (id) { |
35 | switch (id) { | 35 | switch (id) { |
36 | ${files | 36 | ${files |
37 | - | ||
38 | .map((p) => | 37 | .map((p) => |
39 | ` case '${getPath(p)}': return () => import('${p | 38 | ` case '${getPath(p)}': return () => import('${p |
40 | .replace('src/views', '/@/views') | 39 | .replace('src/views', '/@/views') |
src/components/Tinymce/src/Editor.vue
1 | <template> | 1 | <template> |
2 | <div class="tinymce-container" :style="{ width: containerWidth }"> | 2 | <div class="tinymce-container" :style="{ width: containerWidth }"> |
3 | - <textarea :id="tinymceId" ref="elRef"></textarea> | 3 | + <textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></textarea> |
4 | </div> | 4 | </div> |
5 | </template> | 5 | </template> |
6 | 6 | ||
@@ -15,7 +15,6 @@ | @@ -15,7 +15,6 @@ | ||
15 | watch, | 15 | watch, |
16 | onUnmounted, | 16 | onUnmounted, |
17 | onDeactivated, | 17 | onDeactivated, |
18 | - watchEffect, | ||
19 | } from 'vue'; | 18 | } from 'vue'; |
20 | import { basicProps } from './props'; | 19 | import { basicProps } from './props'; |
21 | import toolbar from './toolbar'; | 20 | import toolbar from './toolbar'; |
@@ -36,12 +35,9 @@ | @@ -36,12 +35,9 @@ | ||
36 | emits: ['change', 'update:modelValue'], | 35 | emits: ['change', 'update:modelValue'], |
37 | setup(props, { emit, attrs }) { | 36 | setup(props, { emit, attrs }) { |
38 | const editorRef = ref<any>(null); | 37 | const editorRef = ref<any>(null); |
38 | + const tinymceId = ref<string>(snowUuid('tiny-vue')); | ||
39 | const elRef = ref<Nullable<HTMLElement>>(null); | 39 | const elRef = ref<Nullable<HTMLElement>>(null); |
40 | 40 | ||
41 | - const tinymceId = computed(() => { | ||
42 | - return snowUuid('tiny-vue'); | ||
43 | - }); | ||
44 | - | ||
45 | const tinymceContent = computed(() => { | 41 | const tinymceContent = computed(() => { |
46 | return props.modelValue; | 42 | return props.modelValue; |
47 | }); | 43 | }); |
@@ -118,12 +114,18 @@ | @@ -118,12 +114,18 @@ | ||
118 | 114 | ||
119 | function init() { | 115 | function init() { |
120 | toPromise().then(() => { | 116 | toPromise().then(() => { |
121 | - initEditor(); | 117 | + setTimeout(() => { |
118 | + initEditor(); | ||
119 | + }, 0); | ||
122 | }); | 120 | }); |
123 | } | 121 | } |
124 | 122 | ||
125 | function initEditor() { | 123 | function initEditor() { |
126 | getTinymce().PluginManager.add('lineHeight', lineHeight(getTinymce())); | 124 | getTinymce().PluginManager.add('lineHeight', lineHeight(getTinymce())); |
125 | + const el = unref(elRef); | ||
126 | + if (el) { | ||
127 | + el.style.visibility = ''; | ||
128 | + } | ||
127 | getTinymce().init(unref(initOptions)); | 129 | getTinymce().init(unref(initOptions)); |
128 | } | 130 | } |
129 | 131 |