gdxz/case-data-admin

Fork 0

wucongxing8150 ce5ca666f1 修改了编辑框1

2025-08-13 16:41:26 +08:00

7.7 KiB

Raw Permalink Blame History

UEditor 富文本编辑器组件

概述

UEditor 是一个基于 vue-ueditor-wrap 的富文本编辑器组件，专门为文章管理、内容编辑等场景设计。该组件已经集成到文章管理系统中，支持富文本编辑、图片上传、表格插入等功能。

功能特性

🎯 核心功能

富文本编辑：支持文本格式化、段落样式、列表等
图片管理：支持图片上传、插入、编辑
表格功能：支持表格插入、编辑、合并单元格
媒体支持：支持视频、附件插入
代码插入：支持代码块插入和语法高亮
内容导入：支持Word、Markdown文档导入

🚀 增强功能

自动保存：60秒自动保存，防止内容丢失
全屏编辑：支持全屏模式，提升编辑体验
响应式设计：自适应不同屏幕尺寸
右键菜单：支持右键快捷操作
工具栏定制：丰富的工具栏配置

快速开始

1. 基本用法

<template>
  <UEditor v-model="content" :id="'my_editor'" />
</template>

<script setup>
import { ref } from 'vue';
import UEditor from '/@/components/business/ueditor.vue';

const content = ref('<p>初始内容</p>');
</script>

2. 表单集成

<template>
  <a-form :model="form" :rules="rules">
    <a-form-item label="标题" name="title">
      <a-input v-model:value="form.title" />
    </a-form-item>
    
    <a-form-item label="内容" name="content">
      <UEditor v-model="form.content" :id="'article_content'" />
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue';
import UEditor from '/@/components/business/ueditor.vue';

const form = reactive({
  title: '',
  content: ''
});

const rules = {
  title: [{ required: true, message: '请输入标题' }],
  content: [{ required: true, message: '请输入内容' }]
};
</script>

3. 条件显示

<template>
  <UEditor 
    v-if="showEditor" 
    v-model="modalForm.content" 
    :id="'modal_content'" 
  />
</template>

配置说明

编辑器配置

const editorConfig = {
  // 文件上传接口
  serverUrl: '/admin/api/admin/system/editor',
  
  // 请求头配置
  serverHeaders: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  },
  
  // 编辑器尺寸
  initialFrameHeight: 500,
  initialFrameWidth: '100%',
  
  // 自动保存
  enableAutoSave: true,
  autoSaveInterval: 60000,
  
  // 其他配置
  loadConfigFromServer: true,
  enableContextMenu: true,
  catchRemoteImageEnable: false
};

工具栏配置

工具栏包含以下功能组：

基础编辑

undo - 撤销
redo - 重做
formatmatch - 格式刷
autotypeset - 自动排版

文本格式

bold - 加粗
italic - 斜体
underline - 下划线
forecolor - 字体颜色
backcolor - 背景色
fontfamily - 字体
fontsize - 字号

段落格式

justifyleft - 左对齐
justifycenter - 居中对齐
justifyright - 右对齐
justifyjustify - 两端对齐
indent - 首行缩进
lineheight - 行间距

插入功能

simpleupload - 单图上传
insertimage - 多图上传
insertvideo - 视频插入
attachment - 附件插入
inserttable - 表格插入
link - 超链接
insertcode - 代码插入

高级功能

contentimport - 内容导入
template - 模板
formula - 公式
print - 打印
preview - 预览

在文章管理中的应用

文章编辑表单

文章管理系统中已经集成了UEditor组件，用于编辑文章内容：

<!-- 文件位置: src/views/business/case-clinical-article/case-clinical-article-form.vue -->
<a-form-item label="内容" name="articleContent" v-if="!isLinkChecked">
  <div class="editor-container">
    <div class="editor-tip">请在此处编辑文章内容，支持富文本格式、图片上传、表格等功能</div>
    <UEditor v-model="form.articleContent" :id="'article_content'" />
  </div>
</a-form-item>

表单验证

const rules = {
  articleContent: [{ 
    required: !isLinkChecked.value, 
    message: '内容 必填',
    validator: (rule, value) => {
      if (isLinkChecked.value) {
        return Promise.resolve();
      }
      if (!value || value.trim() === '') {
        return Promise.reject('内容 必填');
      }
      return Promise.resolve();
    }
  }]
};

内容处理

// 获取纯文本内容
if (form.articleContent) {
  form.articleContentText = form.articleContent.replace(/<[^>]*>/g, '');
}

样式定制

编辑器容器样式

.editor-container {
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  background-color: #fafafa;
  min-height: 200px;
}

.editor-tip {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #8c8c8c;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

组件样式优化

UEditor组件本身已经包含了样式优化：

.uebox {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.uebox :deep(.edui-editor-toolbarbox) {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-bottom: 1px solid #e8e8e8;
}

注意事项

1. ID唯一性

每个UEditor实例必须有唯一的ID，避免冲突：

<UEditor :id="'editor_1'" />
<UEditor :id="'editor_2'" />

2. 数据绑定

使用v-model进行双向数据绑定：

<UEditor v-model="form.content" :id="'content_editor'" />

3. 表单验证

在表单验证规则中正确处理富文本内容：

// 检查内容是否为空
if (!form.content || form.content.trim() === '') {
  return Promise.reject('内容不能为空');
}

4. 内容安全

提交时注意HTML内容的处理和安全过滤：

// 简单的HTML标签移除
const plainText = htmlContent.replace(/<[^>]*>/g, '');

// 或者使用专门的HTML清理库
import DOMPurify from 'dompurify';
const cleanHtml = DOMPurify.sanitize(htmlContent);

5. 性能优化

避免在同一个页面中使用过多编辑器实例，合理控制数量。

测试页面

项目包含了一个测试页面用于验证UEditor组件功能：

文件位置: src/views/business/ueditor-test.vue

测试页面包含：

基本功能测试
表单集成测试
内容预览
操作按钮测试

文件结构

src/
├── components/
│   └── business/
│       └── ueditor.vue          # UEditor组件
├── views/
│   └── business/
│       └── case-clinical-article/
│           ├── case-clinical-article-form.vue    # 文章编辑表单
│           └── case-clinical-article-list.vue    # 文章列表
└── public/
    └── UEditorPlus/             # UEditor资源文件
        ├── ueditor.all.js
        ├── ueditor.config.js
        ├── ueditor.parse.js
        └── ...

依赖说明

vue-ueditor-wrap: Vue3的UEditor包装器
UEditorPlus: 富文本编辑器核心库
Ant Design Vue: UI组件库（用于表单和样式）

更新日志

v1.0.0 (当前版本)

✅ 基础富文本编辑功能
✅ 图片上传和管理
✅ 表格插入和编辑
✅ 自动保存功能
✅ 响应式设计
✅ 文章管理集成
✅ 样式优化

技术支持

如有问题，请检查：

控制台错误信息
网络请求状态
组件导入路径
ID唯一性
数据绑定正确性

7.7 KiB Raw Permalink Blame History Unescape Escape