tc-rich-renderer

v1.0.0-beta

Published

6 months ago

A rich text editor and renderer based on TipTap, with table support, custom extensions, and Web Component integration

0High
0Medium
0Low

ddmarketing

vue vue3 rich-text-editor tiptap web-component

TC Rich Renderer

一个基于 TipTap 的富文本编辑器和渲染器组件，支持表格编辑、自定义扩展等强大功能。

✨ 特性

📝 功能完整的富文本编辑器 - 基于 TipTap，支持所有常用编辑功能
🎨 高度可定制 - 支持主题、自定义颜色、字体大小、行高等
🌐 Web Component - 可作为独立的 Web Component 使用

📦 安装

npm install tc-rich-renderer

安装依赖

npm install vue@^3.2.0 element-plus@^2.0.0 @tiptap/vue-3@^3.16.0 @tiptap/core@^3.16.0 @tiptap/starter-kit@^3.16.0

或使用 pnpm：

pnpm add tc-rich-renderer
pnpm add vue element-plus @tiptap/vue-3 @tiptap/core @tiptap/starter-kit

🚀 快速开始

基础使用

<template>
  <div>
    <TcEditor v-model="content" @change="handleChange" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TcEditor } from 'tc-rich-renderer'
import 'tc-rich-renderer/dist/tc-rich-renderer.css'

const content = ref('<p>开始编辑...</p>')

function handleChange(html) {
  console.log('内容变化：', html)
}
</script>

使用组件方法

<template>
  <div>
    <el-button @click="getContent">获取内容</el-button>
    <el-button @click="setContent">设置内容</el-button>
    
    <TcEditor ref="editorRef" v-model="content" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TcEditor } from 'tc-rich-renderer'
import 'tc-rich-renderer/dist/tc-rich-renderer.css'

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

// 获取 HTML 内容
function getContent() {
  const html = editorRef.value?.getHTML()
  console.log(html)
}

// 设置内容
function setContent() {
  editorRef.value?.setContent('<h2>新的内容</h2><p>这是通过方法设置的</p>')
}

// 访问底层 TipTap 编辑器
function toggleBold() {
  editorRef.value?.editor?.chain().focus().toggleBold().run()
}
</script>

使用 Web Component（渲染器）

在 Vue 项目中：

<template>
  <tc-renderer :html="content" theme="default" />
</template>

<script setup>
import { ref } from 'vue'
import { registerTcWebComponents } from 'tc-rich-renderer'

// 注册 Web Component
registerTcWebComponents()

const content = ref('<h1>标题</h1><p>这是要显示的内容</p>')
</script>

在普通 HTML 中使用：

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import { registerTcWebComponents } from 'tc-rich-renderer'
    registerTcWebComponents()
  </script>
</head>
<body>
  <tc-renderer 
    html="<h1>标题</h1><p>内容</p>"
    theme="default">
  </tc-renderer>
</body>
</html>

📖 API 文档

TcEditor 组件

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string | '' | HTML 内容（支持 v-model） |

Events

| 事件 | 参数 | 说明 | |------|------|------| | update:modelValue | (html: string) | 内容更新时触发 | | change | (html: string) | 内容变化时触发 |

暴露的方法

| 方法 | 参数 | 返回值 | 说明 | |------|------|--------|------| | getHTML | - | string | 获取当前 HTML 内容 | | setContent | (html: string) | void | 设置编辑器内容 | | editor | - | Editor | 访问底层 TipTap 编辑器实例 |

使用示例

<script setup>
import { ref } from 'vue'
import { TcEditor } from 'tc-rich-renderer'

const editorRef = ref(null)

// 获取内容
const html = editorRef.value?.getHTML()

// 设置内容
editorRef.value?.setContent('<p>新内容</p>')

// 使用 TipTap 编辑器方法
editorRef.value?.editor?.chain().focus().toggleBold().run()
</script>

TcRenderer 组件（Web Component）

属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | html | string | '' | 要渲染的 HTML 内容 | | theme | 'default' \| 'dark' | 'default' | 主题 |

🎨 功能特性

文本格式化

粗体、斜体、下划线、删除线
代码、代码块
上标、下标
字体颜色、背景色
字体大小
行高

段落和标题

标题（H1-H5）
段落
引用块
分隔线

列表

有序列表
无序列表
任务列表
列表项颜色自定义

表格

插入表格
添加/删除行列
合并/拆分单元格
拖选多个单元格
调整列宽
单元格背景色

插入内容

图片（URL）
链接
水平线

其他

撤销/重做
缩进/取消缩进
文本对齐
清除格式

🔧 自定义扩展

本包包含以下自定义 TipTap 扩展：

FontSize - 字体大小
LineHeight - 行高
Indent - 缩进
ListItemColor - 列表项颜色
ParagraphColor - 段落颜色
TableCellDragSelect - 表格单元格拖选
TableActionsFocusFixPlugin - 表格操作优化

单独使用扩展

import { FontSize, LineHeight, Indent } from 'tc-rich-renderer'
import { Editor } from '@tiptap/core'

const editor = new Editor({
  extensions: [
    FontSize,
    LineHeight,
    Indent,
    // ...其他扩展
  ]
})

📦 构建产物

dist/
├── tc-rich-renderer.es.js      # ESM 格式（推荐）
├── tc-rich-renderer.umd.js     # UMD 格式
├── tc-rich-renderer.css        # 样式文件（必须引入）
└── index.d.ts                  # TypeScript 类型声明

文件大小

ESM: ~50KB（压缩后 ~10KB）
UMD: ~27KB（压缩后 ~8KB）
CSS: ~5KB（压缩后 ~1.3KB）

🌐 浏览器支持

Chrome（最新版）
Firefox（最新版）
Safari（最新版）
Edge（最新版）

🔗 相关链接

🤝 贡献

欢迎提交 Pull Request！

📝 更新日志

1.0.0 (2026-01-30)

🎉 首次正式发布
✨ 完整的富文本编辑器功能
✨ 表格编辑支持
✨ Web Component 支持
✨ TypeScript 类型支持
✨ 自定义 TipTap 扩展