627 lines
17 KiB
Vue
627 lines
17 KiB
Vue
<template>
|
||
<div class="wang-editor-wrapper" :class="{ focused: isFocused }">
|
||
<div ref="toolbarRef" class="toolbar-container"></div>
|
||
<div ref="editorRef" class="editor-container"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import '@wangeditor/editor/dist/css/style.css';
|
||
import { uploadFile } from '@/api/file';
|
||
|
||
interface Props {
|
||
modelValue: string;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
modelValue: '',
|
||
});
|
||
|
||
const emit = defineEmits<{
|
||
'update:modelValue': [value: string];
|
||
}>();
|
||
|
||
const toolbarRef = ref<HTMLDivElement>();
|
||
const editorRef = ref<HTMLDivElement>();
|
||
const isFocused = ref(false);
|
||
let editorInstance: any = null;
|
||
let isDestroyed = false;
|
||
|
||
// 获取上传文件的 URL
|
||
const getUploadUrl = (): string => {
|
||
return import.meta.env.VITE_API_BASE_URL;
|
||
};
|
||
|
||
// 获取 Authorization Header
|
||
const getAuthHeaders = () => {
|
||
const token = localStorage.getItem('token');
|
||
return token ? { Authorization: `Bearer ${token}` } : {};
|
||
};
|
||
|
||
// 上传图片处理函数
|
||
const handleUploadImage = async (file: File, insertFn: (url: string, alt?: string, href?: string) => void) => {
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
const response: any = await uploadFile(formData, {
|
||
category: '编辑器',
|
||
});
|
||
|
||
// axios 拦截器已经返回了 response.data，所以直接使用 response
|
||
if (response?.success) {
|
||
const fileUrl = response.data.file_url; // 例如: /uploads/2024/01/15/xxx.jpg
|
||
const baseUrl = getUploadUrl() || window.location.origin;
|
||
|
||
// 处理URL：如果已经是完整URL则直接使用，否则拼接baseUrl
|
||
let fullUrl = fileUrl;
|
||
if (!fileUrl.startsWith('http')) {
|
||
// 确保URL以/开头，baseUrl不以/结尾
|
||
const base = baseUrl.replace(/\/$/, '');
|
||
const url = fileUrl.startsWith('/') ? fileUrl : '/' + fileUrl;
|
||
fullUrl = `${base}${url}`;
|
||
}
|
||
|
||
insertFn(fullUrl, file.name, fullUrl);
|
||
ElMessage.success('图片上传成功');
|
||
} else {
|
||
ElMessage.error('上传失败：' + (response?.message || '未知错误'));
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Upload error:', error);
|
||
ElMessage.error('上传失败：' + (error.message || '未知错误'));
|
||
}
|
||
};
|
||
|
||
// 上传视频处理函数
|
||
const handleUploadVideo = async (file: File, insertFn: (url: string, poster?: string) => void) => {
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
const response: any = await uploadFile(formData, {
|
||
category: '编辑器',
|
||
});
|
||
|
||
if (response?.success) {
|
||
const fileUrl = response.data.file_url;
|
||
const baseUrl = getUploadUrl() || window.location.origin;
|
||
|
||
let fullUrl = fileUrl;
|
||
if (!fileUrl.startsWith('http')) {
|
||
const base = baseUrl.replace(/\/$/, '');
|
||
const url = fileUrl.startsWith('/') ? fileUrl : '/' + fileUrl;
|
||
fullUrl = `${base}${url}`;
|
||
}
|
||
|
||
insertFn(fullUrl, '');
|
||
ElMessage.success('视频上传成功');
|
||
} else {
|
||
ElMessage.error('上传失败：' + (response?.message || '未知错误'));
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Upload error:', error);
|
||
ElMessage.error('上传失败：' + (error.message || '未知错误'));
|
||
}
|
||
};
|
||
|
||
// 上传附件处理函数
|
||
const handleUploadAttachment = async (file: File, insertFn: (url: string, text?: string) => void) => {
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
|
||
const response: any = await uploadFile(formData, {
|
||
category: '编辑器',
|
||
});
|
||
|
||
if (response?.success) {
|
||
const fileUrl = response.data.file_url;
|
||
const baseUrl = getUploadUrl() || window.location.origin;
|
||
|
||
let fullUrl = fileUrl;
|
||
if (!fileUrl.startsWith('http')) {
|
||
const base = baseUrl.replace(/\/$/, '');
|
||
const url = fileUrl.startsWith('/') ? fileUrl : '/' + fileUrl;
|
||
fullUrl = `${base}${url}`;
|
||
}
|
||
|
||
insertFn(fullUrl, file.name);
|
||
ElMessage.success('附件上传成功');
|
||
} else {
|
||
ElMessage.error('上传失败：' + (response?.message || '未知错误'));
|
||
}
|
||
} catch (error: any) {
|
||
console.error('Upload error:', error);
|
||
ElMessage.error('上传失败：' + (error.message || '未知错误'));
|
||
}
|
||
};
|
||
|
||
// 初始化编辑器
|
||
const initEditor = async () => {
|
||
if (!editorRef.value || !toolbarRef.value || isDestroyed) return;
|
||
|
||
try {
|
||
// 动态导入 wangEditor
|
||
const { createEditor, createToolbar } = await import('@wangeditor/editor');
|
||
|
||
const editorConfig = {
|
||
placeholder: '请输入内容...',
|
||
onChange: (editor: any) => {
|
||
if (!isDestroyed) {
|
||
const html = editor.getHtml();
|
||
emit('update:modelValue', html);
|
||
}
|
||
},
|
||
// 自定义上传配置
|
||
MENU_CONF: {
|
||
// 图片上传配置
|
||
uploadImage: {
|
||
server: '/api/files',
|
||
fieldName: 'file',
|
||
headers: getAuthHeaders(),
|
||
customUpload: async (file: File, insertFn: (url: string, alt?: string, href?: string) => void) => {
|
||
await handleUploadImage(file, insertFn);
|
||
},
|
||
allowedFileTypes: ['image/*'],
|
||
maxFileSize: 5 * 1024 * 1024, // 5MB
|
||
},
|
||
// 视频上传配置
|
||
uploadVideo: {
|
||
server: '/api/files',
|
||
fieldName: 'file',
|
||
headers: getAuthHeaders(),
|
||
customUpload: async (file: File, insertFn: (url: string, poster?: string) => void) => {
|
||
await handleUploadVideo(file, insertFn);
|
||
},
|
||
allowedFileTypes: ['video/*'],
|
||
maxFileSize: 100 * 1024 * 1024, // 100MB
|
||
},
|
||
// 附件上传配置
|
||
uploadAttachment: {
|
||
server: '/api/files',
|
||
fieldName: 'file',
|
||
headers: getAuthHeaders(),
|
||
customUpload: async (file: File, insertFn: (url: string, text?: string) => void) => {
|
||
await handleUploadAttachment(file, insertFn);
|
||
},
|
||
allowedFileTypes: ['*'],
|
||
maxFileSize: 50 * 1024 * 1024, // 50MB
|
||
},
|
||
},
|
||
};
|
||
|
||
// 创建编辑器
|
||
editorInstance = createEditor({
|
||
selector: editorRef.value,
|
||
html: props.modelValue || '',
|
||
config: editorConfig,
|
||
mode: 'default',
|
||
});
|
||
|
||
// 创建工具栏
|
||
createToolbar({
|
||
editor: editorInstance,
|
||
selector: toolbarRef.value,
|
||
config: {},
|
||
});
|
||
|
||
// 监听编辑器焦点事件（兼容不同版本的 API）
|
||
nextTick(() => {
|
||
if (editorInstance) {
|
||
// 方法1: 使用 on 方法（如果存在）
|
||
if (typeof editorInstance.on === 'function') {
|
||
editorInstance.on('focus', () => {
|
||
isFocused.value = true;
|
||
});
|
||
|
||
editorInstance.on('blur', () => {
|
||
isFocused.value = false;
|
||
});
|
||
}
|
||
|
||
// 方法2: 直接在 DOM 元素上监听
|
||
const editorDom = editorRef.value;
|
||
if (editorDom) {
|
||
const textDom = editorDom.querySelector('.w-e-text');
|
||
if (textDom) {
|
||
textDom.addEventListener('focus', () => {
|
||
isFocused.value = true;
|
||
});
|
||
textDom.addEventListener('blur', () => {
|
||
isFocused.value = false;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} catch (error) {
|
||
console.error('Failed to initialize editor:', error);
|
||
}
|
||
};
|
||
|
||
// 监听外部值变化
|
||
watch(() => props.modelValue, (newVal) => {
|
||
if (editorInstance && newVal !== editorInstance.getHtml()) {
|
||
editorInstance.setHtml(newVal || '');
|
||
}
|
||
});
|
||
|
||
// 暴露方法
|
||
defineExpose({
|
||
clear: () => {
|
||
if (editorInstance) {
|
||
editorInstance.clear();
|
||
}
|
||
},
|
||
getContent: () => {
|
||
if (editorInstance) {
|
||
return editorInstance.getHtml();
|
||
}
|
||
return props.modelValue;
|
||
},
|
||
setContent: (content: string) => {
|
||
if (editorInstance) {
|
||
editorInstance.setHtml(content || '');
|
||
}
|
||
},
|
||
});
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
setTimeout(() => {
|
||
initEditor();
|
||
}, 100);
|
||
});
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
isDestroyed = true;
|
||
if (editorInstance) {
|
||
editorInstance.destroy();
|
||
editorInstance = null;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.wang-editor-wrapper {
|
||
width: 100%;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background-color: var(--fill-color-blank);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.toolbar-container {
|
||
border-bottom: 1px solid var(--border-color-lighter);
|
||
background-color: var(--fill-color-light);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.editor-container {
|
||
min-height: 400px;
|
||
background-color: var(--fill-color-blank);
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
</style>
|
||
|
||
<style lang="less">
|
||
// 全局样式：WangEditor 编辑器主题适配
|
||
.wang-editor-wrapper {
|
||
// 工具栏样式
|
||
:deep(.w-e-toolbar) {
|
||
background-color: var(--fill-color-light) !important;
|
||
border-bottom-color: var(--border-color-lighter) !important;
|
||
border-bottom: 1px solid var(--border-color-lighter) !important;
|
||
|
||
// 工具栏按钮项
|
||
.w-e-bar-item {
|
||
button {
|
||
color: var(--text-color-primary) !important;
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
transition: all 0.2s ease !important;
|
||
|
||
&:hover:not(.disabled) {
|
||
background-color: var(--fill-color) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
&:active:not(.disabled) {
|
||
background-color: var(--fill-color-dark) !important;
|
||
}
|
||
|
||
&.active {
|
||
background-color: var(--fill-color-dark) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
&.disabled {
|
||
color: var(--text-color-disabled) !important;
|
||
cursor: not-allowed !important;
|
||
opacity: 0.5 !important;
|
||
}
|
||
}
|
||
|
||
// 按钮组分隔线
|
||
&::after {
|
||
background-color: var(--border-color-lighter) !important;
|
||
}
|
||
}
|
||
|
||
// 工具栏分割线
|
||
.w-e-bar-divider {
|
||
background-color: var(--border-color-lighter) !important;
|
||
}
|
||
}
|
||
|
||
// 编辑器文本容器
|
||
:deep(.w-e-text-container) {
|
||
background-color: var(--fill-color-blank) !important;
|
||
color: var(--text-color-primary) !important;
|
||
border: none !important;
|
||
|
||
// 编辑器内容区域
|
||
.w-e-text {
|
||
color: var(--text-color-primary) !important;
|
||
background-color: transparent !important;
|
||
min-height: 400px !important;
|
||
|
||
// 编辑器焦点状态
|
||
&:focus {
|
||
outline: none !important;
|
||
}
|
||
|
||
// 编辑器内的段落
|
||
p {
|
||
color: var(--text-color-primary) !important;
|
||
margin: 0.5em 0 !important;
|
||
}
|
||
|
||
// 编辑器内的标题
|
||
h1, h2, h3, h4, h5, h6 {
|
||
color: var(--text-color-primary) !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
// 编辑器内的链接
|
||
a {
|
||
color: var(--primary-color) !important;
|
||
text-decoration: underline !important;
|
||
|
||
&:hover {
|
||
color: var(--primary-color) !important;
|
||
opacity: 0.8 !important;
|
||
}
|
||
}
|
||
|
||
// 编辑器内的代码
|
||
code {
|
||
background-color: var(--fill-color-light) !important;
|
||
color: var(--text-color-primary) !important;
|
||
border: 1px solid var(--border-color-lighter) !important;
|
||
padding: 2px 6px !important;
|
||
border-radius: 3px !important;
|
||
}
|
||
|
||
// 编辑器内的代码块
|
||
pre {
|
||
background-color: var(--fill-color-light) !important;
|
||
border: 1px solid var(--border-color-lighter) !important;
|
||
color: var(--text-color-primary) !important;
|
||
border-radius: 4px !important;
|
||
|
||
code {
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
// 编辑器内的引用
|
||
blockquote {
|
||
border-left: 4px solid var(--border-color) !important;
|
||
background-color: var(--fill-color-light) !important;
|
||
color: var(--text-color-primary) !important;
|
||
padding: 0.6em 1.2em !important;
|
||
margin: 1em 0 !important;
|
||
}
|
||
|
||
// 编辑器内的表格
|
||
table {
|
||
border-collapse: collapse !important;
|
||
border: 1px solid var(--border-color-lighter) !important;
|
||
|
||
th, td {
|
||
border: 1px solid var(--border-color-lighter) !important;
|
||
background-color: var(--fill-color-blank) !important;
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
|
||
th {
|
||
background-color: var(--fill-color-light) !important;
|
||
}
|
||
}
|
||
|
||
// 编辑器内的列表
|
||
ul, ol {
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
|
||
li {
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
}
|
||
|
||
// 占位符样式
|
||
.placeholder {
|
||
color: var(--text-color-placeholder) !important;
|
||
}
|
||
}
|
||
|
||
// 菜单下拉框
|
||
:deep(.w-e-drop-panel) {
|
||
background-color: var(--bg-color-overlay) !important;
|
||
border: 1px solid var(--border-color) !important;
|
||
box-shadow: var(--box-shadow) !important;
|
||
color: var(--text-color-primary) !important;
|
||
|
||
.w-e-list-item {
|
||
color: var(--text-color-primary) !important;
|
||
transition: all 0.2s ease !important;
|
||
|
||
&:hover {
|
||
background-color: var(--fill-color-light) !important;
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
|
||
&.selected {
|
||
background-color: var(--fill-color-light) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
&.disabled {
|
||
color: var(--text-color-disabled) !important;
|
||
cursor: not-allowed !important;
|
||
|
||
&:hover {
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 分隔线
|
||
.w-e-drop-panel-divider {
|
||
background-color: var(--border-color-lighter) !important;
|
||
}
|
||
}
|
||
|
||
// 工具栏下拉菜单
|
||
:deep(.w-e-toolbar-menu) {
|
||
background-color: var(--bg-color-overlay) !important;
|
||
border: 1px solid var(--border-color) !important;
|
||
box-shadow: var(--box-shadow) !important;
|
||
|
||
.w-e-menu-item {
|
||
color: var(--text-color-primary) !important;
|
||
|
||
&:hover {
|
||
background-color: var(--fill-color-light) !important;
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
|
||
&.active {
|
||
background-color: var(--fill-color-light) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 模态框
|
||
:deep(.w-e-modal) {
|
||
background-color: var(--bg-color-overlay) !important;
|
||
border: 1px solid var(--border-color) !important;
|
||
box-shadow: var(--box-shadow) !important;
|
||
|
||
.w-e-modal-header {
|
||
border-bottom: 1px solid var(--border-color-lighter) !important;
|
||
color: var(--text-color-primary) !important;
|
||
}
|
||
|
||
.w-e-modal-body {
|
||
background-color: var(--bg-color-overlay) !important;
|
||
color: var(--text-color-primary) !important;
|
||
|
||
input, textarea, select {
|
||
background-color: var(--fill-color-blank) !important;
|
||
border-color: var(--border-color) !important;
|
||
color: var(--text-color-primary) !important;
|
||
|
||
&:focus {
|
||
border-color: var(--primary-color) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.w-e-modal-footer {
|
||
border-top: 1px solid var(--border-color-lighter) !important;
|
||
|
||
button {
|
||
background-color: var(--fill-color-blank) !important;
|
||
border-color: var(--border-color) !important;
|
||
color: var(--text-color-primary) !important;
|
||
|
||
&:hover {
|
||
background-color: var(--fill-color-light) !important;
|
||
border-color: var(--primary-color) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 工具栏图标颜色
|
||
:deep(.w-e-bar-item svg),
|
||
:deep(.w-e-bar-item .w-e-icon) {
|
||
fill: var(--text-color-primary) !important;
|
||
color: var(--text-color-primary) !important;
|
||
transition: fill 0.2s ease, color 0.2s ease !important;
|
||
}
|
||
|
||
:deep(.w-e-bar-item:hover:not(.disabled) svg),
|
||
:deep(.w-e-bar-item:hover:not(.disabled) .w-e-icon),
|
||
:deep(.w-e-bar-item.active svg),
|
||
:deep(.w-e-bar-item.active .w-e-icon) {
|
||
fill: var(--primary-color) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
// 工具栏按钮组
|
||
:deep(.w-e-bar-divider) {
|
||
background-color: var(--border-color-lighter) !important;
|
||
}
|
||
|
||
// 编辑区域边框
|
||
&.focused {
|
||
border-color: var(--primary-color) !important;
|
||
box-shadow: 0 0 0 1px var(--primary-color) inset !important;
|
||
}
|
||
}
|
||
|
||
// 深色主题额外适配
|
||
[data-theme="dark"] {
|
||
.wang-editor-wrapper {
|
||
:deep(.w-e-text-container .w-e-text) {
|
||
// 编辑器内的图片边框
|
||
img {
|
||
border: 1px solid var(--border-color-lighter) !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
// 编辑器内的水平线
|
||
hr {
|
||
border-top-color: var(--border-color-lighter) !important;
|
||
}
|
||
|
||
// 编辑器内的表格行交替颜色
|
||
table tr:nth-child(even) {
|
||
background-color: var(--fill-color-extra-light) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Fix z-index for full-screen/maximize mode
|
||
:deep(.w-e-fullscreen),
|
||
:deep(.w-e-fullscreen *),
|
||
:deep(.w-e-modal),
|
||
:deep(.w-e-drop-panel) {
|
||
z-index: 99999 !important;
|
||
}
|
||
</style>
|
||
|