富文本编辑器组件

概述

RichTextEditor 是一个基于 TipTap 的富文本编辑器组件，提供完整的文本编辑功能，支持图片、视频、附件上传，表格编辑，以及 Markdown 导入导出。

组件路径：web/apps/web-ele/src/components/zq-form/rich-text-editor/

组件名称：RichTextEditor

功能特性

• 丰富的文本格式化（加粗、斜体、下划线、删除线等）
• 多级标题（H1-H3）
• 文字颜色和背景高亮
• 文本对齐（左、中、右、两端）
• 有序/无序列表
• 链接插入
• 图片上传（本地上传、网络图片、粘贴、拖拽）
• 视频上传
• 附件上传
• 表格编辑（插入、行列操作）
• 全屏编辑（支持 A4/A5/Letter 纸张尺寸）
• 字数统计
• Markdown 支持
• 撤销/重做

Props

属性	类型	默认值	说明
modelValue	string	''	HTML 内容
placeholder	string	'请输入内容...'	占位符
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
minHeight	number | string	200	最小高度
maxHeight	number | string	500	最大高度
showToolbar	boolean	true	是否显示工具栏
showWordCount	boolean	true	是否显示字数统计
maxLength	number	0	最大字数（0 表示不限制）
toolbarConfig	ToolbarConfig	-	工具栏配置

工具栏配置

interface ToolbarConfig {
  groups?: ToolbarGroup[];
  insert?: InsertConfig;
}

type ToolbarGroup = 
  | 'history'    // 撤销/重做
  | 'heading'    // 标题
  | 'format'     // 格式化（加粗、斜体等）
  | 'color'      // 颜色
  | 'align'      // 对齐
  | 'list'       // 列表
  | 'insert'     // 插入
  | 'tools';     // 工具

interface InsertConfig {
  link?: boolean;
  image?: boolean;
  video?: boolean;
  table?: boolean;
  attachment?: boolean;
}

Events

事件	参数	说明
update:modelValue	string	值更新
change	string	内容变化
focus	FocusEvent	获得焦点
blur	FocusEvent	失去焦点
ready	Editor	编辑器就绪

Expose 方法

方法	参数	返回值	说明
getEditor	-	Editor	获取编辑器实例
getHTML	-	string	获取 HTML 内容
getText	-	string	获取纯文本内容
getMarkdown	-	string	获取 Markdown 内容
setContent	content: string	-	设置内容
clear	-	-	清空内容
focus	-	-	聚焦
insertText	text: string	-	在光标位置插入文本

使用示例

基本用法

<template>
  <RichTextEditor v-model="content" />
</template>

<script setup>
import { ref } from 'vue';

const content = ref('');
</script>

自定义工具栏

<template>
  <RichTextEditor
    v-model="content"
    :toolbar-config="{
      groups: ['history', 'heading', 'format', 'color', 'list'],
      insert: {
        link: true,
        image: true,
        video: false,
        table: true,
        attachment: false,
      },
    }"
  />
</template>

只读模式

<template>
  <RichTextEditor
    v-model="content"
    :readonly="true"
    :show-toolbar="false"
  />
</template>

获取不同格式内容

<template>
  <RichTextEditor ref="editorRef" v-model="content" />
  <button @click="getContent">获取内容</button>
</template>

<script setup>
import { ref } from 'vue';

const editorRef = ref();
const content = ref('');

function getContent() {
  console.log('HTML:', editorRef.value.getHTML());
  console.log('Text:', editorRef.value.getText());
  console.log('Markdown:', editorRef.value.getMarkdown());
}
</script>

与表单设计器集成

在表单设计器中，该组件作为 rich-text-editor 类型的表单项使用：

{
  "type": "rich-text-editor",
  "field": "content",
  "label": "内容",
  "props": {
    "placeholder": "请输入内容...",
    "minHeight": 300,
    "maxHeight": 600,
    "showWordCount": true,
    "toolbarConfig": {
      "groups": ["history", "heading", "format", "color", "align", "list", "insert"],
      "insert": {
        "link": true,
        "image": true,
        "video": true,
        "table": true,
        "attachment": true
      }
    }
  }
}

扩展功能

组件包含以下自定义扩展：

• ResizableImage - 可调整大小的图片
• Attachment - 附件节点
• Video - 视频节点
• FontSize - 字体大小

典型应用场景

• 公告编辑：系统公告、通知编辑
• 文章发布：新闻、博客文章编辑
• 邮件编辑：邮件内容编辑
• 文档编写：在线文档编辑