zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(tinymce): fixed `tinymce` destory method 

修复tinymce销毁方法可能出现异常的问题
This commit is contained in:
无木 2021-08-19 19:51:55 +08:00
parent 8e01377481
commit fb43fad555
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Tinymce/src/Editor.vue
View File

@ -19,7 +19,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import type { RawEditorSettings } from 'tinymce'; import type { Editor, RawEditorSettings } from 'tinymce';
import tinymce from 'tinymce/tinymce'; import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver'; import 'tinymce/themes/silver';
import 'tinymce/icons/default/icons'; import 'tinymce/icons/default/icons';
@ -60,8 +60,8 @@
ref, ref,
unref, unref,
watch, watch,
onUnmounted,
onDeactivated, onDeactivated,
onBeforeUnmount,
} from 'vue'; } from 'vue';
import ImgUpload from './ImgUpload.vue'; import ImgUpload from './ImgUpload.vue';
import { toolbar, plugins } from './tinymce'; import { toolbar, plugins } from './tinymce';
@ -114,9 +114,9 @@
components: { ImgUpload }, components: { ImgUpload },
inheritAttrs: false, inheritAttrs: false,
props: tinymceProps, props: tinymceProps,
emits: ['change', 'update:modelValue'], emits: ['change', 'update:modelValue', 'inited', 'init-error'],
setup(props, { emit, attrs }) { setup(props, { emit, attrs }) {
const editorRef = ref(); const editorRef = ref<Nullable<Editor>>(null);
const fullscreen = ref(false); const fullscreen = ref(false);
const tinymceId = ref<string>(buildShortUUID('tiny-vue')); const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
const elRef = ref<Nullable<HTMLElement>>(null); const elRef = ref<Nullable<HTMLElement>>(null);
@ -165,7 +165,7 @@
content_css: content_css:
publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css', publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
...options, ...options,
setup: (editor) => { setup: (editor: Editor) => {
editorRef.value = editor; editorRef.value = editor;
editor.on('init', (e) => initSetup(e)); editor.on('init', (e) => initSetup(e));
}, },
@ -194,9 +194,7 @@
); );
onMountedOrActivated(() => { onMountedOrActivated(() => {
if (initOptions.value.inline) { if (!initOptions.value.inline) {
tinymceId.value = unref(initOptions).selector!;
} else {
tinymceId.value = buildShortUUID('tiny-vue'); tinymceId.value = buildShortUUID('tiny-vue');
} }
nextTick(() => { nextTick(() => {
@ -206,7 +204,7 @@
}); });
}); });
onUnmounted(() => { onBeforeUnmount(() => {
destory(); destory();
}); });
@ -216,7 +214,7 @@
function destory() { function destory() {
if (tinymce !== null) { if (tinymce !== null) {
tinymce?.remove?.(tinymceId.value as string); tinymce?.remove?.(unref(initOptions).selector!);
} }
} }
@ -225,7 +223,14 @@
if (el) { if (el) {
el.style.visibility = ''; el.style.visibility = '';
} }
tinymce.init(unref(initOptions)); tinymce
.init(unref(initOptions))
.then((editor) => {
emit('inited', editor);
})
.catch((err) => {
emit('init-error', err);
});
} }
function initSetup(e) { function initSetup(e) {