<template>
|
<div :class="prefixCls" :style="{ width: containerWidth }">
|
<textarea
|
:id="tinymceId"
|
ref="elRef"
|
:style="{ visibility: 'hidden' }"
|
v-if="!initOptions.inline"
|
></textarea>
|
<slot v-else></slot>
|
<div class="p-2 tox-statusbar">
|
<a-upload
|
v-if="isElse"
|
v-model:file-list="fileListTemp"
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
list-type="picture"
|
class="upload-list-inline"
|
>
|
<a-button type="text" size="small" style="margin: 0 auto">
|
<upload-outlined></upload-outlined>
|
附件
|
</a-button>
|
<template #iconRender><PaperClipOutlined /></template>
|
<template #itemRender="{ file, fileList, actions }">
|
<a-space class="ant-upload-list-picture-card">
|
<span style="display: flex; flex-wrap: wrap">
|
<PaperClipOutlined style="margin-right: 4px" />
|
<span v-if="!file.editor" :style="file.status === 'error' ? 'color: red' : ''">{{
|
file.name
|
}}</span>
|
<span v-else>
|
<a-input size="small" v-model:value="file.tempName"></a-input>
|
</span>
|
</span>
|
<span v-if="!file.editor">
|
<a href="javascript:;" @click="actions.preview">预览</a>
|
<a href="javascript:;" @click="fnRename(file, fileList)">重命名</a>
|
<a href="javascript:;" @click="actions.remove">删除</a>
|
</span>
|
<span v-else>
|
<a href="javascript:;" @click="fnSaveRename(file, fileList)">保存</a>
|
<a href="javascript:;" @click="fnOffRename(file, fileList)">取消</a>
|
</span>
|
</a-space>
|
</template>
|
</a-upload>
|
<div :class="fileListTemp.length > 0 ? 'my-upload-list' : ''">
|
<div style="display: flex">
|
<ImgUpload
|
:fullscreen="fullscreen"
|
@uploading="handleImageUploading"
|
@done="handleDone"
|
v-if="isImg"
|
v-show="editorRef"
|
:title="'图片'"
|
:disabled="disabled"
|
:accept="'.jpg,.jpeg,.gif,.png,.webp'"
|
/>
|
<a-button v-if="isText" type="text" size="small">
|
<SnippetsOutlined />
|
快速文本</a-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import type { Editor, RawEditorSettings } from 'tinymce';
|
import { PaperClipOutlined, UploadOutlined, SnippetsOutlined } from '@ant-design/icons-vue';
|
import tinymce from 'tinymce/tinymce';
|
import 'tinymce/themes/silver';
|
import 'tinymce/icons/default/icons';
|
import 'tinymce/plugins/advlist';
|
import 'tinymce/plugins/anchor';
|
import 'tinymce/plugins/autolink';
|
import 'tinymce/plugins/autosave';
|
import 'tinymce/plugins/code';
|
import 'tinymce/plugins/codesample';
|
import 'tinymce/plugins/directionality';
|
import 'tinymce/plugins/fullscreen';
|
import 'tinymce/plugins/hr';
|
import 'tinymce/plugins/insertdatetime';
|
import 'tinymce/plugins/link';
|
import 'tinymce/plugins/lists';
|
import 'tinymce/plugins/media';
|
import 'tinymce/plugins/nonbreaking';
|
import 'tinymce/plugins/noneditable';
|
import 'tinymce/plugins/pagebreak';
|
import 'tinymce/plugins/paste';
|
import 'tinymce/plugins/preview';
|
import 'tinymce/plugins/print';
|
import 'tinymce/plugins/save';
|
import 'tinymce/plugins/searchreplace';
|
import 'tinymce/plugins/spellchecker';
|
import 'tinymce/plugins/tabfocus';
|
// import 'tinymce/plugins/table';
|
import 'tinymce/plugins/template';
|
import 'tinymce/plugins/textpattern';
|
import 'tinymce/plugins/visualblocks';
|
import 'tinymce/plugins/visualchars';
|
import 'tinymce/plugins/wordcount';
|
|
import 'tinymce/plugins/image';
|
import 'tinymce/plugins/table';
|
import 'tinymce/plugins/charmap';
|
import 'tinymce/plugins/imagetools';
|
import 'tinymce/plugins/help';
|
import 'tinymce/plugins/emoticons';
|
import 'tinymce/plugins/emoticons/js/emojis';
|
// import 'tinymce/plugins/bdmap';
|
// import 'tinymce/plugins/indent2em';
|
import 'tinymce/plugins/autoresize';
|
// import 'tinymce/plugins/formatpainter';
|
// import 'tinymce/plugins/axupimgs';
|
|
// import 'tinymce/plugins/powerpaste';
|
// import 'tinymce/plugins/casechange';
|
import 'tinymce/plugins/importcss';
|
// import 'tinymce/plugins/tinyddrive';
|
// import 'tinymce/plugins/advcode';
|
// import 'tinymce/plugins/mediaembed';
|
import 'tinymce/plugins/toc';
|
// import 'tinymce/plugins/checklist';
|
// import 'tinymce/plugins/tinycespellchecker';
|
// import 'tinymce/plugins/a11ychecker';
|
// import 'tinymce/plugins/permanentpen';
|
// import 'tinymce/plugins/pageembed';
|
// import 'tinymce/plugins/tinycomments';
|
// import 'tinymce/plugins/mentions';
|
import 'tinymce/plugins/quickbars';
|
// import 'tinymce/plugins/linkchecker';
|
// import 'tinymce/plugins/advtable';
|
// import 'tinymce/plugins/export';
|
|
import {
|
computed,
|
nextTick,
|
ref,
|
unref,
|
watch,
|
onDeactivated,
|
onBeforeUnmount,
|
PropType,
|
useAttrs,
|
} from 'vue';
|
import ImgUpload from './ImgUpload.vue';
|
import {
|
plugins as defaultPlugins,
|
toolbar as defaultToolbar,
|
toolbar_groups as defaultStyleFormats,
|
} from './tinymce';
|
import { buildShortUUID } from '@/utils/uuid';
|
import { bindHandlers } from './helper';
|
import { onMountedOrActivated } from '@vben/hooks';
|
import { useDesign } from '@/hooks/web/useDesign';
|
import { isNumber } from '@/utils/is';
|
import { useLocale } from '@/locales/useLocale';
|
import { useAppStore } from '@/store/modules/app';
|
|
defineOptions({ name: 'Tinymce', inheritAttrs: false });
|
|
const props = defineProps({
|
options: {
|
type: Object as PropType<Partial<RawEditorSettings>>,
|
default: () => ({}),
|
},
|
value: {
|
type: String,
|
},
|
|
toolbar: {
|
type: Array as PropType<string[]>,
|
default: defaultToolbar,
|
},
|
plugins: {
|
type: Array as PropType<string[]>,
|
default: defaultPlugins,
|
},
|
toolbar_groups: {
|
type: Object as PropType<{}>,
|
default: defaultStyleFormats,
|
},
|
modelValue: {
|
type: String,
|
},
|
height: {
|
type: [Number, String] as PropType<string | number>,
|
required: false,
|
default: 400,
|
},
|
width: {
|
type: [Number, String] as PropType<string | number>,
|
required: false,
|
default: 'auto',
|
},
|
showImageUpload: {
|
type: Boolean,
|
default: true,
|
},
|
fontsize: {
|
type: String,
|
},
|
isElse: {
|
type: Boolean,
|
default: true,
|
},
|
isText: {
|
type: Boolean,
|
default: true,
|
},
|
isImg: {
|
type: Boolean,
|
default: true,
|
},
|
});
|
|
const emit = defineEmits(['change', 'update:modelValue', 'inited', 'init-error']);
|
|
const attrs = useAttrs();
|
const editorRef = ref<Editor | null>(null);
|
const fullscreen = ref(false);
|
const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
|
const elRef = ref<HTMLElement | null>(null);
|
|
const { prefixCls } = useDesign('tinymce-container');
|
|
const appStore = useAppStore();
|
|
const containerWidth = computed(() => {
|
const width = props.width;
|
if (isNumber(width)) {
|
return `${width}px`;
|
}
|
return width;
|
});
|
|
const skinName = computed(() => {
|
return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
|
});
|
|
const langName = computed(() => {
|
const lang = useLocale().getLocale.value;
|
return ['zh_CN', ''].includes(lang) ? lang : 'zh_CN';
|
});
|
|
const initOptions = computed((): RawEditorSettings => {
|
const { height, options, toolbar, plugins, toolbar_groups } = props;
|
|
const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
|
return {
|
selector: `#${unref(tinymceId)}`,
|
height,
|
min_height: 450,
|
font_formats:
|
'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
|
fontsize_formats: '10px 11px 12px 14px 16px 18px 24px 36px 48px 48px 56px 72px',
|
image_advtab: true,
|
importcss_append: true, // 允许样式生效
|
toolbar,
|
toolbar_groups,
|
toolbar_sticky: true, // 粘性工具栏（或停靠工具栏），在向下滚动网页直到不再可见编辑器时，将工具栏和菜单停靠在屏幕顶部
|
toolbar_mode: 'floating', //默认wrap不收缩工具栏，取值为floating或sliding时，将第一行放不下的工具栏按钮缩进抽屉（3个点的图标）里，scrolling则采用移动端的横线滚动方式。
|
// style_formats_autohide: true,
|
menubar: false,
|
branding: false,
|
elementpath: false,
|
// quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
|
plugins,
|
language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
|
language: langName.value,
|
default_link_target: '_blank',
|
link_title: false,
|
statusbar: false,
|
object_resizing: false,
|
auto_focus: true, //让编辑器加载完成后自动获得光标焦点
|
autosave_ask_before_unload: true,
|
autosave_interval: '30s',
|
skin: skinName.value,
|
skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
|
content_css: publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
|
...options,
|
setup: (editor: Editor) => {
|
editorRef.value = editor;
|
editor.on('init', (e) => initSetup(e));
|
},
|
};
|
});
|
|
const disabled = computed(() => {
|
const { options } = props;
|
const getdDisabled = options && Reflect.get(options, 'readonly');
|
const editor = unref(editorRef);
|
if (editor) {
|
editor.setMode(getdDisabled ? 'readonly' : 'design');
|
}
|
return getdDisabled ?? false;
|
});
|
|
watch(
|
() => attrs.disabled,
|
() => {
|
const editor = unref(editorRef);
|
if (!editor) {
|
return;
|
}
|
editor.setMode(attrs.disabled ? 'readonly' : 'design');
|
},
|
);
|
|
onMountedOrActivated(() => {
|
if (!initOptions.value.inline) {
|
tinymceId.value = buildShortUUID('tiny-vue');
|
}
|
nextTick(() => {
|
setTimeout(() => {
|
initEditor();
|
}, 30);
|
});
|
});
|
|
onBeforeUnmount(() => {
|
destory();
|
});
|
|
onDeactivated(() => {
|
destory();
|
});
|
|
function destory() {
|
if (tinymce !== null) {
|
tinymce?.remove?.(unref(initOptions).selector!);
|
}
|
}
|
|
function initEditor() {
|
const el = unref(elRef);
|
if (el) {
|
el.style.visibility = '';
|
}
|
tinymce
|
.init(unref(initOptions))
|
.then((editor) => {
|
emit('inited', editor);
|
})
|
.catch((err) => {
|
emit('init-error', err);
|
});
|
}
|
|
function initSetup(e) {
|
const editor = unref(editorRef);
|
if (!editor) {
|
return;
|
}
|
const value = props.modelValue || '';
|
|
editor.setContent(value);
|
bindModelHandlers(editor);
|
bindHandlers(e, attrs, unref(editorRef));
|
}
|
|
function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
|
if (
|
editor &&
|
typeof val === 'string' &&
|
val !== prevVal &&
|
val !== editor.getContent({ format: attrs.outputFormat })
|
) {
|
editor.setContent(val);
|
}
|
}
|
|
function bindModelHandlers(editor: any) {
|
const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
|
const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
|
|
watch(
|
() => props.modelValue,
|
(val, prevVal) => {
|
setValue(editor, val, prevVal);
|
},
|
);
|
|
watch(
|
() => props.value,
|
(val, prevVal) => {
|
setValue(editor, val, prevVal);
|
},
|
{
|
immediate: true,
|
},
|
);
|
|
editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
|
const content = editor.getContent({ format: attrs.outputFormat });
|
emit('update:modelValue', content);
|
const data = {
|
content,
|
fileUNID: fileListTemp.value,
|
};
|
emit('change', data);
|
});
|
|
editor.on('FullscreenStateChanged', (e) => {
|
fullscreen.value = e.state;
|
});
|
}
|
|
function handleImageUploading(name: string) {
|
const editor = unref(editorRef);
|
if (!editor) {
|
return;
|
}
|
editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
|
const content = editor?.getContent() ?? '';
|
setValue(editor, content);
|
}
|
|
function handleDone(name: string, url: string) {
|
const editor = unref(editorRef);
|
if (!editor) {
|
return;
|
}
|
const content = editor?.getContent() ?? '';
|
const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
|
setValue(editor, val);
|
}
|
|
function getUploadingImgName(name: string) {
|
return `[uploading:${name}]`;
|
}
|
|
// 附件
|
const fileListTemp = ref<UploadProps['fileList']>([
|
// {
|
// uid: '-1',
|
// name: 'xxx.png',
|
// tempName: 'xxx',
|
// status: 'done',
|
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// editor: false,
|
// },
|
// {
|
// uid: '-2',
|
// name: 'yyy.png',
|
// tempName: 'yyy',
|
// status: 'done',
|
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
// editor: false,
|
// },
|
]);
|
function fnRename(file, fileList) {
|
console.log(file, fileList);
|
fileListTemp.value = fileList.map((item) => {
|
// item.tempName = item.name.split('.').slice(0,-1)
|
if (file.uid == item.uid) {
|
item.editor = true;
|
} else {
|
item.editor = false;
|
}
|
return item;
|
});
|
}
|
function fnSaveRename(file, fileList) {
|
fileListTemp.value = fileList.map((item) => {
|
if (file.uid == item.uid) {
|
item.name = item.tempName;
|
item.editor = false;
|
}
|
return item;
|
});
|
}
|
function fnOffRename(file, fileList) {
|
fileListTemp.value = fileList.map((item) => {
|
if (file.uid == item.uid) {
|
item.editor = false;
|
}
|
return item;
|
});
|
}
|
</script>
|
<style lang="less" scope>
|
@prefix-cls: ~'@{namespace}-tinymce-container';
|
|
.@{prefix-cls} {
|
position: relative;
|
line-height: normal;
|
|
textarea {
|
visibility: hidden;
|
z-index: -1;
|
}
|
}
|
|
.my-upload-list {
|
// 过渡
|
position: absolute;
|
left: 78px;
|
transition: all 0.3s;
|
}
|
|
.tox-statusbar {
|
display: flex;
|
// position: absolute;
|
min-height: 40px;
|
border-bottom-right-radius: 8px;
|
border-bottom-left-radius: 8px;
|
background: #f0f2f5;
|
}
|
|
.icon-text {
|
margin-right: 10px;
|
font-size: 14px;
|
}
|
|
.ant-upload-list-picture {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.ant-upload-list-picture-card {
|
display: flex;
|
justify-content: space-between;
|
width: 24vw;
|
margin-right: 10px;
|
padding: 5px 10px;
|
background-color: #edf3f9;
|
|
a {
|
padding: 0 5px;
|
font-size: 12px;
|
}
|
}
|
</style>
|
