<think>
我们将在之前的代码基础上添加新增公告的弹窗功能。使用Element Plus的Dialog和Form组件，并集成
一个富文本编辑器（这里使用
wangEditor，但也可以选择其他，如Quill）。由于Vue项目通常需要额外安装
富文本编辑器，这里以
wangEditor为例（假设已安装）。
注意：如果使用其他
富文本编辑器，需要相应调整。这里我们使用
wangEditor 5版本（Vue版本）。
步骤：
1. 安装
wangEditor: `npm install @
wangeditor/editor @
wangeditor/editor-for-vue@next`
2. 在组件中引入并注册。
由于代码生成环境无法安装，我们仅展示如何使用，并在模板中预留。
修改点：
- 添加
一个el-dialog用于新增公告
- 在对话框中包含两个字段：标题（input）和内容（
富文本编辑器）
- 使用
wangEditor组件
注意：由于
富文本编辑器需要
单独引入，我们将在代码中注释说明。
代码调整如下：
</think>
以下是在原有公告系统中添加新增公告弹窗功能的完整代码实现（基于Element Plus和
wangEditor富文本编辑器）：
```vue
<template>
<div class="container">
<!-- 顶部左右布局模块 -->
<div class="top-section">
<!-- ...原有顶部模块代码保持不变... -->
</div>
<!-- 公告区域 -->
<div class="announcement-section">
<div class="announcement-header">
<div>最新通知公告</div>
<div class="view-all">查看全部></div>
</div>
<!-- 新增按钮 -->
<el-button type="primary" class="add-btn" @click="showDialog = true">
<el-icon><Plus /></el-icon>新增公告
</el-button>
<!-- 公告
列表 -->
<div class="announcement-list">
<!-- ...原有公告
列表代码保持不变... -->
</div>
<!-- 分页 -->
<div class="pagination">
<!-- ...原有分页代码保持不变... -->
</div>
</div>
<!-- 新增公告弹窗 -->
<el-dialog
v-model="showDialog"
title="新增公告"
width="700px"
:close-on-click-modal="false"
>
<el-form :model="newAnnouncement" label-width="80px">
<!-- 标题输入框 -->
<el-form-item label="标题" required>
<el-input
v-model="newAnnouncement.title"
placeholder="请输入公告标题"
clearable
/>
</el-form-item>
<!--
富文本编辑器 -->
<el-form-item label="内容" required>
<div class="editor-container">
<Toolbar
class="editor-toolbar"
:editor="editor"
:defaultConfig="toolbarConfig"
/>
<Editor
class="editor-content"
v-model="newAnnouncement.content"
:defaultConfig="editorConfig"
@onCreated="handleEditorCreated"
/>
</div>
</el-form-item>
<!-- 链接插入区域 -->
<el-form-item label="插入链接">
<div class="link-insert">
<el-input
v-model="linkUrl"
placeholder="输入链接地址"
style="width: 70%"
/>
<el-input
v-model="linkText"
placeholder="链接显示文本"
style="width: 25%; margin-left: 5%"
/>
<el-button
type="primary"
size="small"
style="margin-left: 10px"
@click="insertLink"
>
插入
</el-button>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="submitAnnouncement">发布公告</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onBeforeUnmount, shallowRef } from 'vue'
import { ElMessage } from 'element-plus'
import '@
wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@
wangeditor/editor-for-vue'
// 图标引入
import { Plus } from '@element-plus/icons-vue'
//
富文本编辑器实例
const editor = shallowRef()
const toolbarConfig = {
excludeKeys: [
'uploadVideo', // 排除视频上传
'group-video' // 排除视频组
]
}
const editorConfig = {
placeholder: '请输入公告内容...',
MENU_CONF: {
uploadImage: {
server: '/api/upload', // 假设的上传接口
fieldName: 'file'
}
}
}
// 新增公告相关状态
const showDialog = ref(false)
const linkUrl = ref('')
const linkText = ref('')
const newAnnouncement = reactive({
title: '',
content: ''
})
// 公告数据
const announcements = [
// ...原有公告数据...
]
//
编辑器创建回调
const handleEditorCreated = (instance) => {
editor.value = instance
}
// 插入链接方法
const insertLink = () => {
if (!linkUrl.value || !linkText.value) {
ElMessage.warning('请填写完整的链接信息')
return
}
if (editor.value) {
editor.value.restoreSelection()
editor.value.insertHtml(`<a href="${linkUrl.value}" target="_blank">${linkText.value}</a>`)
// 清空链接输入框
linkUrl.value = ''
linkText.value = ''
}
}
// 提交新公告
const submitAnnouncement = () => {
if (!newAnnouncement.title.trim()) {
ElMessage.warning('请填写公告标题')
return
}
if (!newAnnouncement.content.trim()) {
ElMessage.warning('请填写公告内容')
return
}
// 模拟提交到后端
announcements.unshift({
title: newAnnouncement.title,
date: new Date().toISOString().split('T')[0],
content: newAnnouncement.content.slice(0, 100) + '...', //
列表页显示摘要
fullContent: newAnnouncement.content // 保存完整内容用于详情页
})
ElMessage.success('公告发布成功')
// 重置表单并关闭弹窗
newAnnouncement.title = ''
newAnnouncement.content = ''
showDialog.value = false
}
// 组件销毁时销毁
编辑器
onBeforeUnmount(() => {
if (editor.value == null) return
editor.value.destroy()
})
</script>
<style scoped>
/* 原有样式保持不变 */
/*
编辑器容器样式 */
.editor-container {
border: 1px solid #dcdfe6;
border-radius: 4px;
overflow: hidden;
}
.editor-toolbar {
border-bottom: 1px solid #eee;
}
.editor-content {
height: 300px;
}
.link-insert {
display: flex;
align-items: center;
}
</style>
```
### 新增功能说明：
1. **弹窗组件**：
- 使用`el-dialog`实现模态弹窗
- 标题为"新增公告"，宽度700px
- 包含取消和发布两个操作按钮
2. **表单字段**：
- **标题输入框**：单行文本输入，必填项
- **
富文本编辑器**：使用
wangEditor实现功能丰富的文本编辑
- **链接插入区域**：可输入链接地址和显示文本
3. **
富文本编辑器功能**：
- 支持文本格式设置（加粗、斜体、下划线）
- 支持字体颜色、背景色设置
- 支持
有序/
无序列表
- 支持图片上传（配置了图片上传接口）
- 支持插入链接功能
- 支持撤销/重做操作
4. **交互逻辑**：
- 点击"新增公告"按钮打开弹窗
- 填写标题和内容（内容支持富文本编辑）
- 可通过底部链接区域插入超链接
- 点击"发布公告"进行表单验证并提交
- 提交后自动关闭弹窗并清空表单
本文详细介绍了如何修改WangEditor编辑器的无序列表与有序列表功能，解决点击无法撤销的问题。通过调整源码，将列表操作统一为无序列表，并确保编辑器的撤销功能正常工作。
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
