Commit 1093ec3e6e4fe1f49b7458c29e518744fe56532f

Authored by vben
1 parent bc6214cd

fix(tinymce): fixed multiple editors showing only one (#83)

CHANGELOG.zh_CN.md
  1 +## Wip
  2 +
  3 +### 🐛 Bug Fixes
  4 +
  5 +- 修复多个富文本编辑器只显示一个
  6 +
1 ## 2.0.0-rc.9 (2020-11-9) 7 ## 2.0.0-rc.9 (2020-11-9)
2 8
3 ### ✨ Features 9 ### ✨ Features
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