|
|
|
@ -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) { |
|
|
|
|