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