🎉TinyPro v1.4.0 正式发布：支持 Spring Boot、移动端适配、新增卡片列表和高级表单页面

掘金前端

前端开源星球

2026年1月12日 09:24

你好，我是 Kagol，个人公众号：前端开源星球。

TinyPro 是一个基于 TinyVue 打造的前后端分离的后台管理系统，支持在线配置菜单、路由、国际化，支持页签模式、多级菜单，支持丰富的模板类型，支持多种构建工具，功能强大、开箱即用！

源码：github.com/opentiny/ti…（欢迎 Star ⭐）
官网：opentiny.design/vue-pro/

我们很高兴地宣布，2026年1月10日，TinyPro 正式发布 v1.4.0 版本，本次发布集中在扩展后端模板、增强移动端体验以及对 NestJS 后端功能的实用增强。

本次 v1.4.0 版本主要有以下重大变更：

增加 Spring Boot 后端
增强移动端适配
增加卡片列表和高级表单页面
支持多设备登录
支持配置预览模式

你可以更新 @opentiny/tiny-toolkit-pro@1.4.0 进行体验！

tiny install @opentiny/tiny-toolkit-pro@1.4.0

详细的 Release Notes 请参考：github.com/opentiny/ti…

1 支持 Spring Boot 后端

之前只有 NestJS 后端，有不少开发者提出需要 Java 版本后端，大家的需求必须安排，所以本次版本新增对 Spring Boot 的支持，使得偏 Java / Spring 的团队可以更快速地用熟悉的后端框架搭建 TinyPro 全栈样板。

该支持包括 Docker 化示例、配置覆盖示例（application.yaml 覆写示例）以及针对 deploy 的说明，便于在容器化环境中直接部署或做二次开发。

如果你或团队偏向 Java 技术栈，这次更新显著降低了启动成本与集成难度。

详细使用指南请参考文档：Spring Boot 后端开发指南

2 移动端响应式与布局优化

本次引入移动端适配方案，包含布局调整、样式优化和若干移动交互逻辑改进。配套增加了端到端测试（E2E），保证常见移动场景（小屏导航、侧边栏收起、页签/页面切换）行为稳定。

适配覆盖了常见断点，页面在手机端的易用性和可读性有明显提升，适合需要同时兼顾桌面与移动管理后台的项目。

效果如下：

移动端效果.png

详细介绍请参考文档：TinyPro 响应式适配指南

3 增加卡片列表页面

之前列表页仅提供单一的查询表格形式，功能相对有限，难以满足日益多样化、复杂化的业务需求。为了提升用户体验、增强系统的灵活性，我们在原有基础上新增了一个卡片列表页面，以更直观、灵活的方式展示数据，满足不同场景下的使用需求。

体验地址：opentiny.design/vue-pro/pag…

效果如下：

卡片列表.png

4 增加高级表单页面

表单页增加了高级表单，在普通表单基础上增加了表格整行输入功能。

体验地址：opentiny.design/vue-pro/pag…

效果如下：

高级表单.png

5 支持多设备登录

之前只能同时一个设备登录，后面登录的用户会“挤”掉前面登录的用户，本次版本为账号登录引入设备限制（Device Limit）策略，可限制单账号并发活跃设备数，有助于减少滥用和提高安全性，适配企业安全合规需求。

可通过 nestJs/.env 中的 DEVICE_LIMIT 进行配置。

比如配置最多 2 人登录：

DEVICE_LIMIT=2

如果不想限制登录设备数，可以设置为 -1：

DEVICE_LIMIT=-1

6 演示模式

由于配置了 RejectRequestGuard，默认情况下，所有接口都只能读，不能写，本次版本增加了演示模式（PREVIEW_MODE），要修改 NestJS 后端代码才能改成可写的模式（nestJs/src/app.module.ts）。

本次版本增加了演示模式的配置，可通过 nestJs/.env 中的 PREVIEW_MODE 进行配置。

PREVIEW_MODE 默认为 true, 会拒绝所有的增加、修改、删除操作，设置为 false，则变成可写模式。

PREVIEW_MODE=false

7 Redis 引入应用安装锁（redis app install lock）

主要用于避免重复安装或初始化时的竞态问题。

默认情况下，第一次运行 NestJS 后端，会生成 Redis 锁，后续重新运行 NestJS 后端，不会再更新 MySQL 数据库的数据。

如果你修改了默认的菜单配置（nestJs/src/menu/init/menuData.ts）或者国际化词条（nestJs/locales.json），希望重新初始化数据库，可以在开发机器 Redis 中运行 FLUSHDB 进行解锁，这样重新运行 NestJS 后端时，会重新初始化 MySQL 数据库的数据。

更多更新，请参考 Release Notes：github.com/opentiny/ti…

8 社区贡献

感谢所有为 v1.4.0 做出贡献的开发者！你们的辛勤付出让 TinyPro 变得更好！

注：排名不分先后，按名字首字母排序。

如果你有任何建议或反馈，欢迎通过 GitHub Issues 与我们联系，也欢迎你一起参与 TinyPro 贡献。

往期推荐文章

联系我们

GitHub：github.com/opentiny/ti…（欢迎 Star ⭐）

官网：opentiny.github.io/tiny-pro

个人博客：kagol.github.io/blogs/

小助手微信：opentiny-official

公众号：OpenTiny

深入浅出 TinyEditor 富文本编辑器系列2：快速开始

掘金前端

前端开源星球

2026年1月11日 10:46

你好，我是 Kagol，个人公众号：前端开源星球。

这是《深入浅出 TinyEditor 富文本编辑器系列》的第2篇，完整的系列文章：

深入浅出 TinyEditor 富文本编辑器系列1：TinyEditor 是什么

欢迎使用 TinyEditor - 一款基于 Quill 2.0 构建的强大富文本编辑器，提供了开箱即用的丰富模块和格式。本指南将帮助你快速高效地开始使用 TinyEditor。

架构概述

TinyEditor 采用模块化架构，通过自定义模块、格式和主题扩展了 Quill 的功能。核心结构包括：

模块架构.png

安装

基础设置

使用 npm 安装 TinyEditor：

npm install @opentiny/fluent-editor

该包以 ES 模块形式提供，包含所有必要的依赖，包括作为基础的 Quill 2.0。

项目结构

项目结构.png

基本用法

最小示例

创建一个具有最小配置的基础编辑器实例：

import FluentEditor from '@opentiny/fluent-editor'
 
const editor = new FluentEditor('#editor', {
  theme: 'snow'
})

包含多个模块的示例

这是一个展示配置多个模块的综合设置：

import FluentEditor, { CollaborationModule } from '@opentiny/fluent-editor'

// 引入协同编辑相关依赖
import * as Y from 'yjs'
import { Awareness } from 'y-protocols/awareness'
import { QuillBinding } from 'y-quill'
import { WebsocketProvider } from 'y-websocket'
import { IndexeddbPersistence } from 'y-indexeddb'
import QuillCursors from 'quill-cursors'

// 注册协同编辑模块
FluentEditor.register(
  'modules/collaborative-editing',
  CollaborationModule,
  true,
)

const editor = new FluentEditor('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['link', 'image', 'video'],
      ['clean']
    ],
    // 配置协同编辑模块
    'collaborative-editing': {
        deps: {
          Y,
          Awareness,
          QuillBinding,
          QuillCursors,
          WebsocketProvider,
          IndexeddbPersistence,
        },
        provider: {
          type: 'websocket',
          options: {
            serverUrl: 'wss://ai.opentiny.design/tiny-editor/',
            roomName: 'tiny-editor-document-demo-roomName',
          },
        },
        awareness: {
          state: {
            name: `userId:${Math.random().toString(36).substring(2, 15)}`,
            color: `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`,
          },
        },
    },
    'mathlive': true, // 需要引入 mathlive 相关依赖
    'syntax': true // 需要引入 highlight.js 相关依赖
  }
})

详细配置请参考文档：opentiny.github.io/tiny-editor…

可用模块

TinyEditor 提供了丰富的预注册模块集：

模块	描述	用法
toolbar	带有自定义处理器的增强工具栏	`toolbar: { container: TOOLBAR_CONFIG }`
image	支持格式化的高级图片处理	`image: true`
collaborative-editing	实时协作	参见上面的协作示例
mathlive	LaTeX 数学公式	`mathlive: true`
syntax	代码语法高亮	`syntax: true`
emoji	表情选择器和支持	`emoji: true`
mention	@提及功能	`mention: true`

配置选项

编辑器接受扩展了 Quill 选项的综合配置对象：

选项	类型	默认值	描述
`modules`	`IEditorModules`	`{}`	模块配置
`scrollingContainer`	`HTMLElement` \| `string` \| `null`	`body`	自定义滚动容器
`autoProtocol`	`boolean` \| `string`	`false`	自动为链接添加协议
`editorPaste`	`any`	`undefined`	自定义粘贴处理
`screenshot`	`Partial<ScreenShotOptions>`	`undefined`	截图配置

快速开始模板

这是一个可用于快速原型设计的即用型 HTML 模板（可直接复制到 HTML 文件中运行）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TinyEditor Quick Start</title>
  <style>
    #editor { 
      height: 400px; 
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
  <!-- 引入 @opentiny/fluent-editor -->
  <script type="importmap">
    {
      "imports": {
        "@opentiny/fluent-editor": "https://unpkg.com/@opentiny/fluent-editor@3.18.3/index.es.js"
      }
    }
  </script>
  <!-- 引入 @opentiny/fluent-editor 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/@opentiny/fluent-editor@3.18.3/style.css" />
</head>
<body>
  <div id="editor"></div>
  
  <script type="module">
    import FluentEditor from '@opentiny/fluent-editor'
    
    const editor = new FluentEditor('#editor', {
      theme: 'snow',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          ['link', 'image'],
          ['clean']
        ]
      }
    })
  </script>
</body>
</html>

效果图：

项目效果图.png

TinyEditor 类扩展了 Quill 的核心功能，同时保持与现有 Quill 配置的兼容性。这确保了现有 Quill 用户的平滑迁移路径，同时提供了对 TinyEditor 增强功能集的访问。

后续将全面介绍 TinyEditor 如何使用、设计架构、实现原理、二次开发等内容，点个关注，不迷路。

联系我们

GitHub：github.com/opentiny/ti…（欢迎 Star ⭐）

官网：opentiny.github.io/tiny-editor

个人博客：kagol.github.io/blogs/

小助手微信：opentiny-official

公众号：OpenTiny

🎉历时1年，TinyEditor v4.0 正式发布！

掘金前端

前端开源星球

2026年1月7日 10:28

你好，我是 Kagol，个人公众号：前端开源星球。

TinyEditor 是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，框架无关、功能强大、开箱即用。

源码：github.com/opentiny/ti…
官网：opentiny.github.io/tiny-editor…

去年1月2日，我们发布了 v3.25 版本，功能基本已经完备，之后 v3.x 版本进入了维护期，同时开启了漫长的 v4.0 版本的开发，v4.0 的核心目标是体验优化和稳定性提升，并支持多人协同编辑。

在长达1年的开发和打磨后，我们荣幸地宣布 TinyEditor v4.0 正式发布！这个版本汇聚了团队的心血，带来了激动人心多人协同编辑新功能、以及大量体验优化和稳定性改进。

重点特性：

支持多人协同编辑：一起在编辑器写（玩）文档（贪吃蛇游戏摸鱼）🐶
基于 quill-table-up 的新表格方案：表格操作体验++⚡️
基于 emoji-mart 的 Emoji 表情：表情党最爱😍
支持斜杆菜单和丰富的快捷键：键盘流的福音😄
图片/视频/文件上传体验优化🌄

详细的 Release Notes 请参考：github.com/opentiny/ti…

欢迎安装 v4.0 版本体验：

npm i @opentiny/fluent-editor@4.0.0

1 亮点特性

1.1 多人协作编辑

v4.0 最重磅的功能之一是引入了完整的协作编辑能力。我们集成了 quill-cursor 模块，支持多人实时协作编辑，并提供了独立的 npm 包供开发者集成。无论是需要离线支持还是云端协作，TinyEditor 都能胜任。

你可以在我们的演示项目中进行体验：opentiny.github.io/tiny-editor…

效果如下：

TinyEditor 协同编辑效果

关于协同编辑更详细的介绍，参考：如何使用 TinyEditor 快速部署一个多人协同富文本编辑器？

1.2 表格能力升级

集成了 table-up 模块，大幅提升了表格编辑和操作能力，支持更复杂的表格场景。

体验地址：opentiny.github.io/tiny-editor…

效果如下：

TinyEditor 表格模块效果

详细介绍可以参考之前的文章：更强大的表格

1.3 更丰富的 Emoji 表情😘

集成 emoji-mart，提供丰富的表情选择
修复了插入表情后的光标位置问题
完善了表情插入的交互体验

体验地址：opentiny.github.io/tiny-editor…

效果如下：

TinyEditor Emoji 表情

详细介绍可以参考之前的文章：更丰富的表情

1.4 快捷键和快速菜单

新增了强大的快捷键系统和快速菜单功能，让高级用户能够更高效地操作编辑器。

体验地址：opentiny.github.io/tiny-editor…

效果如下：

快捷键.gif

1.5 颜色选择器升级

自定义颜色选择器现在能保存当前选择，并支持添加更多颜色。

效果如下：

1.6 文本模板与国际化

支持 i18n 文本模板替换
完善了国际化翻译（header、picker 等组件）
更好的多语言支持体验

1.7 图片和文件增强

图片工具栏：选中图片时显示专门的操作工具栏
自定义上传：增加 allowInvalidUrl 选项，支持 Electron 等特定场景
改进的上传逻辑：优化了失败状态的处理

2 技术改进

2.1 构建和工程化

修复了 SSR 构建问题
优化了 Vite 配置，解决了 PostCSS 和 Tailwind 的兼容性问题
改进了 SCSS 文件引入方式
输出文件名称优化

2.2 依赖管理

外部化 emoji-mart 和 floating-ui 依赖，减少包体积
移除了 better-table 和 lodash-es，优化依赖树

2.3 代码质量

完整的测试覆盖率提升
重构优化：移除冗余代码
API 标准化：scrollIntoView → scrollSelectionIntoView
示例代码 async/await 改造，代码现代化

2.4 类型安全

修复了因 TypeScript 类型导致的编译错误
改进了类型定义

2.5 API 导出增强

v4.0 导出了工具栏配置常量，方便开发者定制：

DEFAULT_TOOLBAR：默认工具栏配置
FULL_TOOLBAR：完整工具栏配置

2.6 增加自动发包工作流

增加 auto-publish / auto-deploy 等自动化工作流，支持打 tag 之后自动发版本、生成 Release Notes
PR 门禁在单元测试基础上增加 npm 包和网站构建，确保合入 PR 之前，npm 包构建和网站构建是正常的，通过自动化方式保障版本质量。

3 问题修复

v4.0 修复了大量已知问题，包括：

工具栏选择器不跟随光标变化的问题
行高作用域问题
列表样式显示不正确
背景色 SVG 图标问题
VitePress 默认样式影响的问题
自定义上传失败时表格数据结构破坏的问题
多项文档和国际化翻译问题

4 社区贡献

感谢所有为 v4.0 做出贡献的开发者！你们的辛勤付出让 TinyEditor 变得更好！

注：排名不分先后，按名字首字母排序。

如果你有任何建议或反馈，欢迎通过 GitHub Issues 与我们联系。

往期推荐文章

联系我们

GitHub：github.com/opentiny/ti…（欢迎 Star ⭐）

官网：opentiny.github.io/tiny-editor

个人博客：kagol.github.io/blogs/

小助手微信：opentiny-official

公众号：OpenTiny

阅读视图

1 支持 Spring Boot 后端

2 移动端响应式与布局优化

3 增加卡片列表页面

4 增加高级表单页面

5 支持多设备登录

6 演示模式

7 Redis 引入应用安装锁（redis app install lock）

8 社区贡献

往期推荐文章

联系我们

架构概述

安装

基础设置

项目结构

基本用法

最小示例

包含多个模块的示例

可用模块

配置选项

快速开始模板

联系我们

1 亮点特性

1.1 多人协作编辑

1.2 表格能力升级

1.3 更丰富的 Emoji 表情😘

1.4 快捷键和快速菜单

1.5 颜色选择器升级

1.6 文本模板与国际化

1.7 图片和文件增强

2 技术改进

2.1 构建和工程化

2.2 依赖管理

2.3 代码质量

2.4 类型安全

2.5 API 导出增强

2.6 增加自动发包工作流

3 问题修复

4 社区贡献

往期推荐文章

联系我们