|
|
@ -19,39 +19,39 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
<script lang="ts">
|
|
|
|
import type { Editor, 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'
|
|
|
|
import 'tinymce/plugins/advlist';
|
|
|
|
import 'tinymce/plugins/advlist'
|
|
|
|
import 'tinymce/plugins/anchor';
|
|
|
|
import 'tinymce/plugins/anchor'
|
|
|
|
import 'tinymce/plugins/autolink';
|
|
|
|
import 'tinymce/plugins/autolink'
|
|
|
|
import 'tinymce/plugins/autosave';
|
|
|
|
import 'tinymce/plugins/autosave'
|
|
|
|
import 'tinymce/plugins/code';
|
|
|
|
import 'tinymce/plugins/code'
|
|
|
|
import 'tinymce/plugins/codesample';
|
|
|
|
import 'tinymce/plugins/codesample'
|
|
|
|
import 'tinymce/plugins/directionality';
|
|
|
|
import 'tinymce/plugins/directionality'
|
|
|
|
import 'tinymce/plugins/fullscreen';
|
|
|
|
import 'tinymce/plugins/fullscreen'
|
|
|
|
import 'tinymce/plugins/hr';
|
|
|
|
import 'tinymce/plugins/hr'
|
|
|
|
import 'tinymce/plugins/insertdatetime';
|
|
|
|
import 'tinymce/plugins/insertdatetime'
|
|
|
|
import 'tinymce/plugins/link';
|
|
|
|
import 'tinymce/plugins/link'
|
|
|
|
import 'tinymce/plugins/lists';
|
|
|
|
import 'tinymce/plugins/lists'
|
|
|
|
import 'tinymce/plugins/media';
|
|
|
|
import 'tinymce/plugins/media'
|
|
|
|
import 'tinymce/plugins/nonbreaking';
|
|
|
|
import 'tinymce/plugins/nonbreaking'
|
|
|
|
import 'tinymce/plugins/noneditable';
|
|
|
|
import 'tinymce/plugins/noneditable'
|
|
|
|
import 'tinymce/plugins/pagebreak';
|
|
|
|
import 'tinymce/plugins/pagebreak'
|
|
|
|
import 'tinymce/plugins/paste';
|
|
|
|
import 'tinymce/plugins/paste'
|
|
|
|
import 'tinymce/plugins/preview';
|
|
|
|
import 'tinymce/plugins/preview'
|
|
|
|
import 'tinymce/plugins/print';
|
|
|
|
import 'tinymce/plugins/print'
|
|
|
|
import 'tinymce/plugins/save';
|
|
|
|
import 'tinymce/plugins/save'
|
|
|
|
import 'tinymce/plugins/searchreplace';
|
|
|
|
import 'tinymce/plugins/searchreplace'
|
|
|
|
import 'tinymce/plugins/spellchecker';
|
|
|
|
import 'tinymce/plugins/spellchecker'
|
|
|
|
import 'tinymce/plugins/tabfocus';
|
|
|
|
import 'tinymce/plugins/tabfocus'
|
|
|
|
// import 'tinymce/plugins/table';
|
|
|
|
// import 'tinymce/plugins/table';
|
|
|
|
import 'tinymce/plugins/template';
|
|
|
|
import 'tinymce/plugins/template'
|
|
|
|
import 'tinymce/plugins/textpattern';
|
|
|
|
import 'tinymce/plugins/textpattern'
|
|
|
|
import 'tinymce/plugins/visualblocks';
|
|
|
|
import 'tinymce/plugins/visualblocks'
|
|
|
|
import 'tinymce/plugins/visualchars';
|
|
|
|
import 'tinymce/plugins/visualchars'
|
|
|
|
import 'tinymce/plugins/wordcount';
|
|
|
|
import 'tinymce/plugins/wordcount'
|
|
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
defineComponent,
|
|
|
|
defineComponent,
|
|
|
@ -62,17 +62,18 @@
|
|
|
|
watch,
|
|
|
|
watch,
|
|
|
|
onDeactivated,
|
|
|
|
onDeactivated,
|
|
|
|
onBeforeUnmount,
|
|
|
|
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'
|
|
|
|
import { buildShortUUID } from '/@/utils/uuid';
|
|
|
|
import { buildShortUUID } from '/@/utils/uuid'
|
|
|
|
import { bindHandlers } from './helper';
|
|
|
|
import { bindHandlers } from './helper'
|
|
|
|
import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
|
|
|
|
import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'
|
|
|
|
import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'
|
|
|
|
import { isNumber } from '/@/utils/is';
|
|
|
|
import { isNumber } from '/@/utils/is'
|
|
|
|
import { useLocale } from '/@/locales/useLocale';
|
|
|
|
import { useLocale } from '/@/locales/useLocale'
|
|
|
|
import { useAppStore } from '/@/store/modules/app';
|
|
|
|
import { useAppStore } from '/@/store/modules/app'
|
|
|
|
|
|
|
|
import { useGlobSetting } from '/@/hooks/setting'
|
|
|
|
|
|
|
|
const { viewUrl } = useGlobSetting()
|
|
|
|
const tinymceProps = {
|
|
|
|
const tinymceProps = {
|
|
|
|
options: {
|
|
|
|
options: {
|
|
|
|
type: Object as PropType<Partial<RawEditorSettings>>,
|
|
|
|
type: Object as PropType<Partial<RawEditorSettings>>,
|
|
|
@ -107,7 +108,7 @@
|
|
|
|
type: Boolean,
|
|
|
|
type: Boolean,
|
|
|
|
default: true,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
export default defineComponent({
|
|
|
|
name: 'Tinymce',
|
|
|
|
name: 'Tinymce',
|
|
|
@ -116,37 +117,37 @@
|
|
|
|
props: tinymceProps,
|
|
|
|
props: tinymceProps,
|
|
|
|
emits: ['change', 'update:modelValue', 'inited', 'init-error'],
|
|
|
|
emits: ['change', 'update:modelValue', 'inited', 'init-error'],
|
|
|
|
setup(props, { emit, attrs }) {
|
|
|
|
setup(props, { emit, attrs }) {
|
|
|
|
const editorRef = ref<Nullable<Editor>>(null);
|
|
|
|
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)
|
|
|
|
|
|
|
|
|
|
|
|
const { prefixCls } = useDesign('tinymce-container');
|
|
|
|
const { prefixCls } = useDesign('tinymce-container')
|
|
|
|
|
|
|
|
|
|
|
|
const appStore = useAppStore();
|
|
|
|
const appStore = useAppStore()
|
|
|
|
|
|
|
|
|
|
|
|
const tinymceContent = computed(() => props.modelValue);
|
|
|
|
const tinymceContent = computed(() => props.modelValue)
|
|
|
|
|
|
|
|
|
|
|
|
const containerWidth = computed(() => {
|
|
|
|
const containerWidth = computed(() => {
|
|
|
|
const width = props.width;
|
|
|
|
const width = props.width
|
|
|
|
if (isNumber(width)) {
|
|
|
|
if (isNumber(width)) {
|
|
|
|
return `${width}px`;
|
|
|
|
return `${width}px`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return width;
|
|
|
|
return width
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const skinName = computed(() => {
|
|
|
|
const skinName = computed(() => {
|
|
|
|
return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
|
|
|
|
return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark'
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const langName = computed(() => {
|
|
|
|
const langName = computed(() => {
|
|
|
|
const lang = useLocale().getLocale.value;
|
|
|
|
const lang = useLocale().getLocale.value
|
|
|
|
return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
|
|
|
|
return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN'
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const initOptions = computed((): RawEditorSettings => {
|
|
|
|
const initOptions = computed((): RawEditorSettings => {
|
|
|
|
const { height, options, toolbar, plugins } = props;
|
|
|
|
const { height, options, toolbar, plugins } = props
|
|
|
|
const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
|
|
|
|
const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/'
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
selector: `#${unref(tinymceId)}`,
|
|
|
|
selector: `#${unref(tinymceId)}`,
|
|
|
|
height,
|
|
|
|
height,
|
|
|
@ -166,83 +167,83 @@
|
|
|
|
publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
|
|
|
|
publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
|
|
|
|
...options,
|
|
|
|
...options,
|
|
|
|
setup: (editor: Editor) => {
|
|
|
|
setup: (editor: Editor) => {
|
|
|
|
editorRef.value = editor;
|
|
|
|
editorRef.value = editor
|
|
|
|
editor.on('init', (e) => initSetup(e));
|
|
|
|
editor.on('init', (e) => initSetup(e))
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const disabled = computed(() => {
|
|
|
|
const disabled = computed(() => {
|
|
|
|
const { options } = props;
|
|
|
|
const { options } = props
|
|
|
|
const getdDisabled = options && Reflect.get(options, 'readonly');
|
|
|
|
const getdDisabled = options && Reflect.get(options, 'readonly')
|
|
|
|
const editor = unref(editorRef);
|
|
|
|
const editor = unref(editorRef)
|
|
|
|
if (editor) {
|
|
|
|
if (editor) {
|
|
|
|
editor.setMode(getdDisabled ? 'readonly' : 'design');
|
|
|
|
editor.setMode(getdDisabled ? 'readonly' : 'design')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return getdDisabled ?? false;
|
|
|
|
return getdDisabled ?? false
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
watch(
|
|
|
|
() => attrs.disabled,
|
|
|
|
() => attrs.disabled,
|
|
|
|
() => {
|
|
|
|
() => {
|
|
|
|
const editor = unref(editorRef);
|
|
|
|
const editor = unref(editorRef)
|
|
|
|
if (!editor) {
|
|
|
|
if (!editor) {
|
|
|
|
return;
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
editor.setMode(attrs.disabled ? 'readonly' : 'design');
|
|
|
|
editor.setMode(attrs.disabled ? 'readonly' : 'design')
|
|
|
|
},
|
|
|
|
},
|
|
|
|
);
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
onMountedOrActivated(() => {
|
|
|
|
onMountedOrActivated(() => {
|
|
|
|
if (!initOptions.value.inline) {
|
|
|
|
if (!initOptions.value.inline) {
|
|
|
|
tinymceId.value = buildShortUUID('tiny-vue');
|
|
|
|
tinymceId.value = buildShortUUID('tiny-vue')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
initEditor();
|
|
|
|
initEditor()
|
|
|
|
}, 30);
|
|
|
|
}, 30)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
destory();
|
|
|
|
destory()
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
onDeactivated(() => {
|
|
|
|
onDeactivated(() => {
|
|
|
|
destory();
|
|
|
|
destory()
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
function destory() {
|
|
|
|
function destory() {
|
|
|
|
if (tinymce !== null) {
|
|
|
|
if (tinymce !== null) {
|
|
|
|
tinymce?.remove?.(unref(initOptions).selector!);
|
|
|
|
tinymce?.remove?.(unref(initOptions).selector!)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function initEditor() {
|
|
|
|
function initEditor() {
|
|
|
|
const el = unref(elRef);
|
|
|
|
const el = unref(elRef)
|
|
|
|
if (el) {
|
|
|
|
if (el) {
|
|
|
|
el.style.visibility = '';
|
|
|
|
el.style.visibility = ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
tinymce
|
|
|
|
tinymce
|
|
|
|
.init(unref(initOptions))
|
|
|
|
.init(unref(initOptions))
|
|
|
|
.then((editor) => {
|
|
|
|
.then((editor) => {
|
|
|
|
emit('inited', editor);
|
|
|
|
emit('inited', editor)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.catch((err) => {
|
|
|
|
.catch((err) => {
|
|
|
|
emit('init-error', err);
|
|
|
|
emit('init-error', err)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function initSetup(e) {
|
|
|
|
function initSetup(e) {
|
|
|
|
const editor = unref(editorRef);
|
|
|
|
const editor = unref(editorRef)
|
|
|
|
if (!editor) {
|
|
|
|
if (!editor) {
|
|
|
|
return;
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const value = props.modelValue || '';
|
|
|
|
const value = props.modelValue || ''
|
|
|
|
|
|
|
|
|
|
|
|
editor.setContent(value);
|
|
|
|
editor.setContent(value)
|
|
|
|
bindModelHandlers(editor);
|
|
|
|
bindModelHandlers(editor)
|
|
|
|
bindHandlers(e, attrs, unref(editorRef));
|
|
|
|
bindHandlers(e, attrs, unref(editorRef))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function setValue(editor: Recordable, val: string, prevVal?: string) {
|
|
|
|
function setValue(editor: Recordable, val: string, prevVal?: string) {
|
|
|
@ -252,64 +253,65 @@
|
|
|
|
val !== prevVal &&
|
|
|
|
val !== prevVal &&
|
|
|
|
val !== editor.getContent({ format: attrs.outputFormat })
|
|
|
|
val !== editor.getContent({ format: attrs.outputFormat })
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
editor.setContent(val);
|
|
|
|
editor.setContent(val)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function bindModelHandlers(editor: any) {
|
|
|
|
function bindModelHandlers(editor: any) {
|
|
|
|
const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
|
|
|
|
const modelEvents = attrs.modelEvents ? attrs.modelEvents : null
|
|
|
|
const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
|
|
|
|
const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
watch(
|
|
|
|
() => props.modelValue,
|
|
|
|
() => props.modelValue,
|
|
|
|
(val: string, prevVal: string) => {
|
|
|
|
(val: string, prevVal: string) => {
|
|
|
|
setValue(editor, val, prevVal);
|
|
|
|
setValue(editor, val, prevVal)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
);
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
watch(
|
|
|
|
() => props.value,
|
|
|
|
() => props.value,
|
|
|
|
(val: string, prevVal: string) => {
|
|
|
|
(val: string, prevVal: string) => {
|
|
|
|
setValue(editor, val, prevVal);
|
|
|
|
setValue(editor, val, prevVal)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
immediate: true,
|
|
|
|
immediate: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
);
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
|
|
|
|
editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
|
|
|
|
const content = editor.getContent({ format: attrs.outputFormat });
|
|
|
|
const content = editor.getContent({ format: attrs.outputFormat })
|
|
|
|
emit('update:modelValue', content);
|
|
|
|
emit('update:modelValue', content)
|
|
|
|
emit('change', content);
|
|
|
|
emit('change', content)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
editor.on('FullscreenStateChanged', (e) => {
|
|
|
|
editor.on('FullscreenStateChanged', (e) => {
|
|
|
|
fullscreen.value = e.state;
|
|
|
|
fullscreen.value = e.state
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function handleImageUploading(name: string) {
|
|
|
|
function handleImageUploading(name: string) {
|
|
|
|
const editor = unref(editorRef);
|
|
|
|
const editor = unref(editorRef)
|
|
|
|
if (!editor) {
|
|
|
|
if (!editor) {
|
|
|
|
return;
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
|
|
|
|
editor.execCommand('mceInsertContent', false, getUploadingImgName(name))
|
|
|
|
const content = editor?.getContent() ?? '';
|
|
|
|
const content = editor?.getContent() ?? ''
|
|
|
|
setValue(editor, content);
|
|
|
|
setValue(editor, content)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function handleDone(name: string, url: string) {
|
|
|
|
function handleDone(name: string, url: string) {
|
|
|
|
const editor = unref(editorRef);
|
|
|
|
const editor = unref(editorRef)
|
|
|
|
if (!editor) {
|
|
|
|
if (!editor) {
|
|
|
|
return;
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const content = editor?.getContent() ?? '';
|
|
|
|
const content = editor?.getContent() ?? ''
|
|
|
|
const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
|
|
|
|
const val =
|
|
|
|
setValue(editor, val);
|
|
|
|
content?.replace(getUploadingImgName(name), `<img src="${viewUrl + url}"/>`) ?? ''
|
|
|
|
|
|
|
|
setValue(editor, val)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function getUploadingImgName(name: string) {
|
|
|
|
function getUploadingImgName(name: string) {
|
|
|
|
return `[uploading:${name}]`;
|
|
|
|
return `[uploading:${name}]`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
return {
|
|
|
@ -324,9 +326,9 @@
|
|
|
|
editorRef,
|
|
|
|
editorRef,
|
|
|
|
fullscreen,
|
|
|
|
fullscreen,
|
|
|
|
disabled,
|
|
|
|
disabled,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped></style>
|
|
|
|
<style lang="less" scoped></style>
|
|
|
|