wangys/schoolNews

Fork 0

Files

wangys 0033ac10ec 视图路径修改

2025-10-27 17:29:25 +08:00

3.6 KiB

Raw Blame History

富文本编辑器页面

完整的富文本编辑器功能页面，包含编辑、预览、导出等功能。

路由配置

在路由文件中添加以下配置：

{
  path: '/editor',
  name: 'RichTextEditor',
  component: () => import('@/views/public/editor/RichTextEditorView.vue'),
  meta: {
    title: '富文本编辑器',
    requiresAuth: true
  }
}

功能特性

📝 编辑功能

✅ 完整的富文本编辑器
✅ 实时字数统计
✅ 字数限制设置
✅ 自动保存（每30秒）
✅ 手动保存到本地存储

👁️ 预览功能

✅ 实时预览编辑内容
✅ 复制HTML代码
✅ 弹窗预览模式

💾 导出功能

✅ 导出为HTML
✅ 导出为纯文本
✅ 导出为Markdown
✅ 自定义文件名

🎨 界面特性

✅ 响应式设计
✅ 美观的卡片布局
✅ 功能介绍卡片
✅ 移动端适配

使用示例

1. 基础编辑

<template>
  <RichTextEditorView />
</template>

<script setup lang="ts">
import RichTextEditorView from '@/views/public/editor/RichTextEditorView.vue';
</script>

2. 集成到系统菜单

在菜单配置中添加：

{
  "menuID": "editor",
  "name": "富文本编辑器",
  "url": "/editor",
  "icon": "Edit",
  "type": 1,
  "orderNum": 10
}

快捷键

快捷键	功能
Ctrl/Cmd + S	保存
Ctrl/Cmd + B	加粗
Ctrl/Cmd + I	斜体
Ctrl/Cmd + U	下划线
Ctrl/Cmd + Z	撤销
Ctrl/Cmd + Y	重做

本地存储

页面使用localStorage保存内容：

rich_text_content: 手动保存的内容
rich_text_content_auto: 自动保存的内容
rich_text_saved_at: 保存时间戳

自定义配置

修改编辑器高度

<script setup lang="ts">
const editorHeight = ref('600px'); // 默认500px
</script>

修改自动保存间隔

// 默认30秒
autoSaveTimer = window.setInterval(() => {
  // ...
}, 60000); // 改为60秒

修改字数限制

<script setup lang="ts">
const maxLength = ref(10000); // 默认5000
</script>

注意事项

依赖安装：确保已安装 quill 依赖
图片上传：默认使用base64，大图片可能影响性能
浏览器兼容：现代浏览器支持，IE需要polyfill
数据持久化：localStorage有存储限制（通常5-10MB）

扩展功能建议

1. 图片上传到服务器

// 配置Quill图片上传处理器
const quill = new Quill(editor, {
  modules: {
    toolbar: {
      handlers: {
        image: imageHandler
      }
    }
  }
});

function imageHandler() {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();
  
  input.onchange = async () => {
    const file = input.files[0];
    // 上传到服务器
    const url = await uploadImage(file);
    const range = quill.getSelection();
    quill.insertEmbed(range.index, 'image', url);
  };
}

2. 协同编辑

可以集成WebSocket实现多人协同编辑功能。

3. 版本历史

保存多个版本的内容，支持版本回退。

4. 模板功能

预设多种文档模板，快速开始编辑。

故障排除

问题1：编辑器无法显示

原因：Quill依赖未安装解决：运行 npm install quill

问题2：样式异常

原因：Quill CSS未加载解决：确保组件中导入了 quill/dist/quill.snow.css

3.6 KiB Raw Blame History Unescape Escape