更换编辑器
This commit is contained in:
@@ -44,7 +44,7 @@ body {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.wang-editor-wrapper{
|
||||
.tiptap-editor-wrapper{
|
||||
border: 1px solid #dcdfe6 !important;
|
||||
|
||||
.toolbar-container{
|
||||
@@ -55,8 +55,7 @@ body {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
:deep(.tiptap) {
|
||||
background-color: transparent !important;
|
||||
|
||||
* {
|
||||
@@ -245,14 +244,14 @@ body {
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
.w-e-panel-tab-content {
|
||||
.tiptap-panel-tab-content {
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.wang-editor-wrapper {
|
||||
.tiptap-editor-wrapper {
|
||||
border-color: #3d3d3d !important;
|
||||
background-color: #1a1a1a !important;
|
||||
|
||||
@@ -273,8 +272,7 @@ html.dark {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
:deep(.tiptap) {
|
||||
background-color: transparent !important;
|
||||
|
||||
* {
|
||||
@@ -421,7 +419,7 @@ html.dark {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.w-e-panel-tab-content {
|
||||
.tiptap-panel-tab-content {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,12 +14,12 @@ import { createPinia } from 'pinia'
|
||||
import { useAuthStore } from './stores/auth'
|
||||
// import { initTheme } from './utils/theme'
|
||||
// 导入全局组件
|
||||
import WangEditor from '@/views/components/WangEditor.vue';
|
||||
import TiptapEditor from '@/views/components/TiptapEditor.vue';
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
// 全局注册 WangEditor 组件
|
||||
app.component('WangEditor', WangEditor);
|
||||
// 全局注册 TiptapEditor 组件
|
||||
app.component('TiptapEditor', TiptapEditor);
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
|
||||
+15
-28
@@ -51,20 +51,17 @@ onMounted(() => {
|
||||
tabsWrapper.addEventListener('contextmenu', (e) => {
|
||||
// 排除编辑器相关区域，避免影响编辑器功能
|
||||
// 如果点击在编辑器区域内，完全不做任何处理（优先检查）
|
||||
const editorWrapper = e.target.closest?.('.wang-editor-wrapper');
|
||||
const editorWrapper = e.target.closest?.('.tiptap-editor-wrapper');
|
||||
if (editorWrapper) {
|
||||
// 在编辑器区域内，不处理右键菜单，也不阻止事件
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 检查其他编辑器元素（工具栏、下拉面板等）
|
||||
const editorElements = [
|
||||
'.w-e-toolbar',
|
||||
'.w-e-drop-panel',
|
||||
'.w-e-modal',
|
||||
'.w-e-toolbar-menu',
|
||||
'[data-menu-key]',
|
||||
'[class*="w-e-"]'
|
||||
'.tiptap-toolbar',
|
||||
'.tiptap',
|
||||
'[class*="tiptap-"]'
|
||||
];
|
||||
|
||||
for (const selector of editorElements) {
|
||||
@@ -247,25 +244,18 @@ const showContextMenu = (event, tab) => {
|
||||
// 如果在编辑器区域内，立即返回，不执行任何操作，让编辑器的事件正常处理
|
||||
|
||||
// 先检查是否在编辑器包装器内（最快判断）
|
||||
const wangEditorWrapper = target.closest?.('.wang-editor-wrapper');
|
||||
if (wangEditorWrapper) {
|
||||
const tiptapEditorWrapper = target.closest?.('.tiptap-editor-wrapper');
|
||||
if (tiptapEditorWrapper) {
|
||||
// 在编辑器包装器内，完全不做任何处理，让编辑器正常处理
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 检查所有可能的编辑器元素（包括工具栏、下拉面板、模态框等）
|
||||
const editorSelectors = [
|
||||
'.w-e-toolbar',
|
||||
'.w-e-drop-panel',
|
||||
'.w-e-modal',
|
||||
'.w-e-toolbar-menu',
|
||||
'.toolbar-container',
|
||||
'.tiptap-toolbar',
|
||||
'.tiptap',
|
||||
'.editor-container',
|
||||
'.w-e-text-container',
|
||||
'.w-e-text',
|
||||
// 检查是否有 WangEditor 相关的元素
|
||||
'[data-menu-key]',
|
||||
'[class*="w-e-"]'
|
||||
'[class*="tiptap-"]'
|
||||
];
|
||||
|
||||
for (const selector of editorSelectors) {
|
||||
@@ -298,7 +288,7 @@ const showContextMenu = (event, tab) => {
|
||||
}
|
||||
|
||||
// 排除编辑器区域和右键菜单本身
|
||||
if (target.closest?.('.w-e-toolbar') || target.closest?.('.context-menu') || target.closest?.('.wang-editor-wrapper')) {
|
||||
if (target.closest?.('.tiptap-toolbar') || target.closest?.('.context-menu') || target.closest?.('.tiptap-editor-wrapper')) {
|
||||
return;
|
||||
}
|
||||
hideContextMenu();
|
||||
@@ -739,12 +729,9 @@ const canCloseRight = computed(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 确保编辑器工具栏和下拉面板的 z-index 高于右键菜单
|
||||
:deep(.w-e-toolbar),
|
||||
:deep(.w-e-drop-panel),
|
||||
:deep(.w-e-modal),
|
||||
:deep(.w-e-toolbar-menu) {
|
||||
z-index: 10000 !important; // 高于右键菜单的 9999
|
||||
// 确保编辑器工具栏的 z-index 高于右键菜单
|
||||
:deep(.tiptap-toolbar) {
|
||||
z-index: 10000 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="container-box">
|
||||
<div class="header-bar">
|
||||
<h2>租户域名审核</h2>
|
||||
<el-button @click="fetchData" :loading="loading">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="searchForm.sub_domain"
|
||||
placeholder="搜索二级域名"
|
||||
clearable
|
||||
style="width: 200px; margin-right: 10px;"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 120px; margin-right: 10px;">
|
||||
<el-option label="审核中" :value="0" />
|
||||
<el-option label="已生效" :value="1" />
|
||||
<el-option label="已禁用" :value="2" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="正在加载..."
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="tenant_name" label="租户名称" min-width="150" />
|
||||
<el-table-column prop="sub_domain" label="二级域名前缀" width="150" />
|
||||
<el-table-column prop="main_domain" label="主域名" min-width="150" />
|
||||
<el-table-column prop="full_domain" label="完整域名" min-width="200" />
|
||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status === 0" type="warning">审核中</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 1" type="success">已生效</el-tag>
|
||||
<el-tag v-else type="danger">已禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="申请时间" width="180" />
|
||||
<el-table-column label="操作" width="200" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.status === 0">
|
||||
<el-button size="small" type="success" @click="handleAudit(scope.row, 'approve')">
|
||||
通过
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="handleAudit(scope.row, 'reject')">
|
||||
拒绝
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else-if="scope.row.status === 1">
|
||||
<el-button size="small" text type="danger" @click="handleDisable(scope.row)">
|
||||
禁用
|
||||
</el-button>
|
||||
</template>
|
||||
<span v-else style="color: #999;">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrap">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchData"
|
||||
@current-change="fetchData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Refresh } from '@element-plus/icons-vue'
|
||||
import { getTenantDomainList, auditTenantDomain, toggleTenantDomainStatus } from '@/api/domain'
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const searchForm = reactive({
|
||||
sub_domain: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getTenantDomainList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...searchForm
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleAudit = async (row: any, action: string) => {
|
||||
const msg = action === 'approve' ? '确定要通过该域名申请吗？' : '确定要拒绝该域名申请吗？'
|
||||
await ElMessageBox.confirm(msg, '提示', { type: 'warning' })
|
||||
|
||||
const res = await auditTenantDomain({ id: row.id, action })
|
||||
if (res.code === 200) {
|
||||
ElMessage.success(res.msg)
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDisable = async (row: any) => {
|
||||
await ElMessageBox.confirm('确定要禁用该域名吗？', '提示', { type: 'warning' })
|
||||
|
||||
const res = await toggleTenantDomainStatus(row.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success(res.msg)
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template></template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="container-box">
|
||||
<div class="header-bar">
|
||||
<h2>主域名池管理</h2>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加主域名
|
||||
</el-button>
|
||||
<el-button @click="fetchData" :loading="loading">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="searchForm.main_domain"
|
||||
placeholder="搜索主域名"
|
||||
clearable
|
||||
style="width: 200px; margin-right: 10px;"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<el-select v-model="searchForm.status" placeholder="状态" clearable style="width: 120px; margin-right: 10px;">
|
||||
<el-option label="禁用" :value="0" />
|
||||
<el-option label="启用" :value="1" />
|
||||
</el-select>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="正在加载..."
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="main_domain" label="主域名" min-width="200" />
|
||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
|
||||
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="240" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text @click="handleEdit(scope.row)">
|
||||
<el-icon><Edit /></el-icon>
|
||||
<span>编辑</span>
|
||||
</el-button>
|
||||
<el-button size="small" text @click="handleToggleStatus(scope.row)">
|
||||
<el-icon><Switch /></el-icon>
|
||||
<span>{{ scope.row.status === 1 ? '禁用' : '启用' }}</span>
|
||||
</el-button>
|
||||
<el-button size="small" text type="danger" @click="handleDelete(scope.row)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
<span>删除</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrap">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchData"
|
||||
@current-change="fetchData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑弹窗 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑主域名' : '添加主域名'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
|
||||
<el-form-item label="主域名" prop="main_domain">
|
||||
<el-input v-model="form.main_domain" placeholder="请输入主域名，如: example.com" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Edit, Delete, Refresh, Switch } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getDomainPoolList,
|
||||
createDomainPool,
|
||||
updateDomainPool,
|
||||
deleteDomainPool,
|
||||
toggleDomainPoolStatus
|
||||
} from '@/api/domain'
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
main_domain: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: 0,
|
||||
main_domain: '',
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
main_domain: [
|
||||
{ required: true, message: '请输入主域名', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getDomainPoolList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...searchForm
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
pagination.page = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 添加
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
form.id = 0
|
||||
form.main_domain = ''
|
||||
form.status = 1
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row: any) => {
|
||||
isEdit.value = true
|
||||
form.id = row.id
|
||||
form.main_domain = row.main_domain
|
||||
form.status = row.status
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 提交
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value.validate()
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
const res = await updateDomainPool(form)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('更新成功')
|
||||
dialogVisible.value = false
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '更新失败')
|
||||
}
|
||||
} else {
|
||||
const res = await createDomainPool(form)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('创建成功')
|
||||
dialogVisible.value = false
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '创建失败')
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = (row: any) => {
|
||||
ElMessageBox.confirm('确定要删除该主域名吗？', '提示', {
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const res = await deleteDomainPool(row.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 切换状态
|
||||
const handleToggleStatus = async (row: any) => {
|
||||
const res = await toggleDomainPoolStatus(row.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('状态更新成功')
|
||||
fetchData()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,582 +0,0 @@
|
||||
<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);
|
||||
formData.append("cate", "article");
|
||||
|
||||
const response: any = await uploadFile(formData);
|
||||
|
||||
// 200=新文件上传成功，201=文件已存在（使用已有文件的链接）
|
||||
if (
|
||||
response &&
|
||||
(response.code === 200 || response.code === 201) &&
|
||||
response.data &&
|
||||
response.data.url
|
||||
) {
|
||||
const fileUrl = response.data.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, fullUrl);
|
||||
ElMessage.success(
|
||||
response.code === 201 ? "使用已有图片" : "图片上传成功",
|
||||
);
|
||||
} else {
|
||||
ElMessage.error("上传失败：" + (response?.msg || "未知错误"));
|
||||
}
|
||||
} 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);
|
||||
formData.append("cate", "article");
|
||||
|
||||
const response: any = await uploadFile(formData);
|
||||
|
||||
// 200=新文件上传成功，201=文件已存在（使用已有文件的链接）
|
||||
if (
|
||||
response &&
|
||||
(response.code === 200 || response.code === 201) &&
|
||||
response.data &&
|
||||
response.data.url
|
||||
) {
|
||||
const fileUrl = response.data.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(
|
||||
response.code === 201 ? "使用已有视频" : "视频上传成功",
|
||||
);
|
||||
} else {
|
||||
ElMessage.error("上传失败：" + (response?.msg || "未知错误"));
|
||||
}
|
||||
} 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);
|
||||
formData.append("cate", "article");
|
||||
|
||||
const response: any = await uploadFile(formData);
|
||||
|
||||
// 200=新文件上传成功，201=文件已存在（使用已有文件的链接）
|
||||
if (
|
||||
response &&
|
||||
(response.code === 200 || response.code === 201) &&
|
||||
response.data &&
|
||||
response.data.url
|
||||
) {
|
||||
const fileUrl = response.data.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(
|
||||
response.code === 201 ? "使用已有附件" : "附件上传成功",
|
||||
);
|
||||
} else {
|
||||
ElMessage.error("上传失败：" + (response?.msg || "未知错误"));
|
||||
}
|
||||
} 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 lang="less">
|
||||
.wang-editor-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 650px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
|
||||
.toolbar-container {--fill-color-light
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: #f5f7fa;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c0c4cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f5f7fa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
p {
|
||||
color: #1a1a2e !important;
|
||||
margin: 8px 0 !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #1a1a2e !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 8px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3973ff !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f5f7fa !important;
|
||||
color: #1a1a2e !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #f5f7fa !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
margin: 12px 0;
|
||||
overflow-x: auto;
|
||||
color: #1a1a2e !important;
|
||||
|
||||
code {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #3973ff !important;
|
||||
background: #f5f7fa !important;
|
||||
color: #606266 !important;
|
||||
padding: 8px 16px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
width: 100% !important;
|
||||
margin: 12px 0;
|
||||
|
||||
th, td {
|
||||
border: 1px solid #e4e7ed !important;
|
||||
padding: 8px 12px !important;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f5f7fa !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
color: #1a1a2e !important;
|
||||
padding-left: 24px !important;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #1a1a2e !important;
|
||||
line-height: 1.8 !important;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #e4e7ed !important;
|
||||
margin: 16px 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.wang-editor-wrapper {
|
||||
border-color: #3d3d3d;
|
||||
background: #1a1a1a;
|
||||
|
||||
.toolbar-container {
|
||||
background: #2d2d2d;
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #4d4d4d;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #2d2d2d;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
background: transparent !important;
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4f84ff !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #2d2d2d !important;
|
||||
color: #e0e0e0 !important;
|
||||
border-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #2d2d2d !important;
|
||||
border-color: #3d3d3d !important;
|
||||
color: #e0e0e0 !important;
|
||||
|
||||
code {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: #4f84ff !important;
|
||||
background: #2d2d2d !important;
|
||||
color: #b0b0b0 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-color: #3d3d3d !important;
|
||||
|
||||
th, td {
|
||||
border-color: #3d3d3d !important;
|
||||
background: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #2d2d2d !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
color: #e0e0e0 !important;
|
||||
padding-left: 24px !important;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #e0e0e0 !important;
|
||||
line-height: 1.8 !important;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-container {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
background-color: #f5f7fa;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
min-height: 400px;
|
||||
background-color: #ffffff;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,7 @@ notebook/
|
||||
├── index.vue # 主页面（列表+编辑器）
|
||||
├── components/
|
||||
│ ├── edit.vue # 编辑器组件
|
||||
│ └── WangEditor.vue # WangEditor富文本编辑器封装
|
||||
│ └── TiptapEditor.vue # Tiptap富文本编辑器（已全局注册）
|
||||
└── README.md # 说明文档
|
||||
```
|
||||
|
||||
@@ -137,14 +137,14 @@ go run main.go
|
||||
- ✅ 显示更新时间
|
||||
|
||||
### 编辑器功能
|
||||
- ✅ 富文本编辑（基于WangEditor）
|
||||
- ✅ 富文本编辑（基于Tiptap）
|
||||
- ✅ 标题编辑
|
||||
- ✅ 内容编辑
|
||||
- ✅ 保存笔记
|
||||
- ✅ 自动识别新建/编辑模式
|
||||
- ✅ 加载状态显示
|
||||
|
||||
### WangEditor支持的功能
|
||||
### TiptapEditor支持的功能
|
||||
- 文本样式（加粗、斜体、下划线等）
|
||||
- 标题（H1-H6）
|
||||
- 引用
|
||||
@@ -199,9 +199,9 @@ go run main.go
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **前端**: Vue 3 + Element Plus + WangEditor
|
||||
- **前端**: Vue 3 + Element Plus + Tiptap
|
||||
- **后端**: Go + Beego + MySQL
|
||||
- **编辑器**: WangEditor 5.x
|
||||
- **编辑器**: Tiptap (基于ProseMirror)
|
||||
|
||||
## 开发调试
|
||||
|
||||
@@ -233,7 +233,7 @@ go run main.go
|
||||
- 查看后端日志
|
||||
|
||||
3. **编辑器显示异常**
|
||||
- 检查WangEditor是否正确安装
|
||||
- 检查Tiptap是否正确安装
|
||||
- 查看浏览器Console错误信息
|
||||
- 检查CSS样式是否正确加载
|
||||
|
||||
@@ -242,6 +242,6 @@ go run main.go
|
||||
### v1.0.0 (2024)
|
||||
- ✅ 完成基础功能
|
||||
- ✅ 支持笔记CRUD操作
|
||||
- ✅ 集成WangEditor富文本编辑器
|
||||
- ✅ 集成Tiptap富文本编辑器
|
||||
- ✅ 响应式设计支持
|
||||
- ✅ 暗色模式支持
|
||||
|
||||
@@ -1,304 +0,0 @@
|
||||
<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>
|
||||
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import "@wangeditor/editor/dist/css/style.css";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const toolbarRef = ref(null);
|
||||
const editorRef = ref(null);
|
||||
const isFocused = ref(false);
|
||||
let editorInstance = null;
|
||||
let isDestroyed = false;
|
||||
|
||||
// 上传图片处理函数
|
||||
const handleUploadImage = async (file, insertFn) => {
|
||||
try {
|
||||
// 这里替换为实际的上传逻辑
|
||||
// const formData = new FormData();
|
||||
// formData.append('file', file);
|
||||
// const response = await uploadFile(formData);
|
||||
|
||||
// 模拟上传
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
insertFn(e.target.result, file.name);
|
||||
ElMessage.success('图片上传成功');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
ElMessage.error('上传失败：' + (error.message || '未知错误'));
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化编辑器
|
||||
const initEditor = async () => {
|
||||
if (!editorRef.value || !toolbarRef.value || isDestroyed) return;
|
||||
|
||||
try {
|
||||
const { createEditor, createToolbar } = await import("@wangeditor/editor");
|
||||
|
||||
const editorConfig = {
|
||||
placeholder: "请输入内容...",
|
||||
onChange: (editor) => {
|
||||
if (!isDestroyed) {
|
||||
const html = editor.getHtml();
|
||||
emit("update:modelValue", html);
|
||||
}
|
||||
},
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
customUpload: async (file, insertFn) => {
|
||||
await handleUploadImage(file, insertFn);
|
||||
},
|
||||
allowedFileTypes: ["image/*"],
|
||||
maxFileSize: 5 * 1024 * 1024, // 5MB
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
editorInstance = createEditor({
|
||||
selector: editorRef.value,
|
||||
html: props.modelValue || "",
|
||||
config: editorConfig,
|
||||
mode: "default",
|
||||
});
|
||||
|
||||
createToolbar({
|
||||
editor: editorInstance,
|
||||
selector: toolbarRef.value,
|
||||
config: {},
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
if (editorInstance) {
|
||||
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) => {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--el-bg-color);
|
||||
transition: border-color 0.3s ease;
|
||||
|
||||
&.focused {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.toolbar-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: var(--el-fill-color-light);
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--el-border-color);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-border-color-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
padding: 16px;
|
||||
min-height: 400px;
|
||||
|
||||
p {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
margin: 8px 0 !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 8px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--el-color-primary) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--el-fill-color-light) !important;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
border: 1px solid var(--el-border-color) !important;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--el-fill-color-light) !important;
|
||||
border: 1px solid var(--el-border-color) !important;
|
||||
border-radius: 4px;
|
||||
padding: 12px 16px;
|
||||
margin: 12px 0;
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--el-color-primary) !important;
|
||||
background: var(--el-fill-color-light) !important;
|
||||
color: var(--el-text-color-regular) !important;
|
||||
padding: 8px 16px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse !important;
|
||||
border: 1px solid var(--el-border-color) !important;
|
||||
width: 100% !important;
|
||||
margin: 12px 0;
|
||||
|
||||
th, td {
|
||||
border: 1px solid var(--el-border-color) !important;
|
||||
padding: 8px 12px !important;
|
||||
min-width: 60px;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--el-fill-color-light) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
padding-left: 24px !important;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
line-height: 1.8 !important;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--el-border-color) !important;
|
||||
margin: 16px 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<WangEditor v-model="noteContent" />
|
||||
<TiptapEditor v-model="noteContent" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -25,7 +25,6 @@
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { DocumentChecked } from '@element-plus/icons-vue';
|
||||
import WangEditor from './WangEditor.vue';
|
||||
import { getNotebookDetail, createNotebook, updateNotebook } from '@/api/notebook';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -181,7 +180,7 @@ onMounted(() => {
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.wang-editor-wrapper) {
|
||||
:deep(.tiptap-editor-wrapper) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -200,7 +200,28 @@ async function fetchList() {
|
||||
}
|
||||
const res = await getReminderList(params)
|
||||
if (res?.code === 200 && res.data) {
|
||||
list.value = res.data.list || []
|
||||
// 对列表进行排序：提醒中(is_finished: false)的排在前面，已结束的排在后面
|
||||
const sortedList = (res.data.list || []).sort((a, b) => {
|
||||
// 第一优先级：状态排序（提醒中在前，已结束在后）
|
||||
if (!a.is_finished && b.is_finished) return -1
|
||||
if (a.is_finished && !b.is_finished) return 1
|
||||
|
||||
// 第二优先级：状态相同时，按日程发生时间排序
|
||||
const timeA = new Date(a.schedule_time || 0).getTime()
|
||||
const timeB = new Date(b.schedule_time || 0).getTime()
|
||||
|
||||
if (!a.is_finished && !b.is_finished) {
|
||||
// 对于提醒中的日程：时间早的在前（即将发生的优先）
|
||||
return timeA - timeB
|
||||
} else if (a.is_finished && b.is_finished) {
|
||||
// 对于已结束的日程：时间晚的在前（最近结束的优先）
|
||||
return timeB - timeA
|
||||
}
|
||||
|
||||
// 第三优先级：时间相同时，按ID降序排列（新的在前）
|
||||
return b.id - a.id
|
||||
})
|
||||
list.value = sortedList
|
||||
pagination.total = res.data.total ?? 0
|
||||
} else {
|
||||
list.value = []
|
||||
|
||||
Reference in New Issue
Block a user