前端富文本UI组件【免费下载链接】tinymceThe worlds #1 JavaScript library for rich text editing. Available for React, Vue and Angular项目地址https://gitcode.com/gh_mirrors/ti/tinymce点击查看免费下载oxide-components是 TinyMCE 富文本编辑器官方维护的 React 组件库它把编辑器界面中复用的 UI 部件按钮、菜单、下拉框、提示气泡、手风琴等以类型安全的 TypeScript 组件形式沉淀下来并深度集成 TinyMCE 的 Oxide 设计系统。读完本文你将掌握该组件库的安装方式、组件清单、源码架构、键盘导航与样式迁移机制以及完整的本地开发与测试流程。一、项目定位TinyMCE 的 React UI 组件集合根据 README.md 的定义oxide-components是a collection of various react components that would be used in the TinyMCE editor——即一组用于构建 TinyMCE 编辑器界面的 React 组件集合。它不是一个独立可用的 UI 框架而是与 TinyMCE 编辑器生态深度绑定组件的外观样式由 modules/oxide 设计系统提供底层依赖则来自 TinyMCE 生态的基础库。从 package.json 可以看到其核心依赖ephox/katamari函数式工具集数组、对象、类型判断等ephox/sugarDOM 操作与遍历工具ephox/sand浏览器特性探测与平台判断peerDependencies 要求react与react-dom均为^18.3.1。组件库由 vite.config.ts 以 library 模式构建入口为 src/main/ts/main.ts产物输出为 ES 格式formats: [es]到lib/main.js同时把react、react-dom等外部化避免重复打包。二、安装方式oxide-components以 npm 包形式发布官方包名为tinymce/oxide-components。按 README.md 的说明通过 npm 即可安装npm install tinymce/oxide-components由于该包将react和react-dom声明为 peerDependencies安装时宿主项目必须自行提供 React 18.3.1 及以上版本包本身不会捆绑 React 运行时。需要说明的是当前仓库中的 package.json 标记了private: true且版本号为0.0.2说明该模块仍在 TinyMCE monorepo 内部迭代演进中。三、组件清单与目录结构组件库的公开 API 全部由 src/main/ts/main.ts 统一导出主要分为四类1. 通用 UI 组件src/main/ts/components/组件源码位置用途Button/IconButtoncomponents/button / components/iconbutton基础按钮与纯图标按钮Menu/MenuRenderercomponents/menu菜单含Item、ToggleItem、SubmenuItem、DividerDropdowncomponents/dropdown下拉弹出层基于 CSS anchor positioning 定位Tooltipcomponents/tooltip提示气泡暴露tooltipsEventTargetAlertcomponents/alert提示/告警条Accordioncomponents/accordion手风琴折叠面板Card/CardListcomponents/card卡片与卡片列表Confirmation/ConfirmationHost/useConfirmationApicomponents/confirmation确认对话框及命令式 APIContextToolbarcomponents/contexttoolbar上下文工具栏Draggablecomponents/draggable拖拽容器ExpandableBoxcomponents/expandablebox可展开/收起盒子FloatingSidebarcomponents/floatingsidebar悬浮侧边栏Iconcomponents/icon图标渲染SegmentedControlcomponents/segmentedcontrol分段选择控件ToolbarInputFormcomponents/toolbarInputForm工具栏输入表单AutoResizingTextareacomponents/autoresizingtextarea自适应高度文本域2. AI 定制组件src/main/ts/bespoke/tinymceai/针对 TinyMCE 的 AI 能力提供三个专用部件UserPromptBubble用户提示气泡、Spinner加载指示器、Tag标签。3. 键盘导航系统src/main/ts/keynav/这是一套完整的可访问性基础设施通过 React HooksKeyboardNavigationHooks.ts将键盘事件绑定到组件支持多种导航模式FlowTypekeyboard/flowtype焦点在容器内按流向移动TabbingType / SpecialType / ExecutionType / EscapingTypekeyboardTab 切换、特殊键、回车执行、Esc 逃逸等navigation/子目录提供底层焦点移动算法ArrNavigation、DomNavigation、DomPinpoint等。例如Menu.Root内部使用useFlowKeyNavigation建立流向导航并在挂载时聚焦第一个可用项。4. 工具与上下文src/main/ts/utils/、contexts/Bem.ts类型安全的 BEM 类名生成器直接引用tinymce/oxide/skins/ui/default/skin.ts导出的Classes类型做编译期校验ContentUiBem.ts面向内容区content UI的 BEM 助手FocusHelpers.ts焦点管理UniverseContext通过UniverseProvider/useUniverse向组件注入编辑器环境资源UniverseTypes.tsx。四、源码级架构模式1. 类型安全的 BEM 类名每个组件都通过Bem.block/Bem.element生成 Oxide 皮肤类名。以 Button.tsx 为例variant属性primary/secondary/outlined/naked与active状态会被编译为对应 BEM 类// variantprimary, activetrue 时生成 tox-button tox-button--active className{${calculateClassFromVariant(variant, { enabled: active })} ${className ?? }}Bem.ts 的核心价值在于它用 TypeScript 模板字面量类型把Classes拆解为Block、BlockModifier、BlockElement、BlockElementModifier四类从而在编译期就禁止写出 Oxide 皮肤中不存在的类名。需要留意的是类型约束作用在输入参数上block()返回的仍是普通string。2. Storybook 驱动的开发模式每个组件都有配套的Component.stories.tsx如 Button.stories.tsx用于文档与交互演示按 CONTRIBUTING.md 的约定组件文件、stories 文件、工具文件ComponentUtils.ts三者分离复杂逻辑不混入 UI 代码。3. 组合示例Tooltip Dropdown 同触发器CLAUDE.md 给出了一种典型组合Tooltip.Trigger与Dropdown.Trigger都基于cloneElement注入事件处理器可以嵌套使用Dropdown.Root Tooltip.Root Tooltip.Trigger Dropdown.Trigger Button active{isOpen} ... / /Dropdown.Trigger /Tooltip.Trigger Tooltip.Content text{tooltipText} / /Tooltip.Root Dropdown.Content onOpenChange{setIsOpen} Menu.Root.../Menu.Root /Dropdown.Content /Dropdown.Root其原理是Dropdown.Trigger会把...props透传给按钮子元素从而转发Tooltip.Trigger注入的鼠标/焦点事件处理器两个组件的 ref 最终通过 ref 转发链指向同一个按钮 DOM 节点。五、开发、构建与测试工作流常用脚本来自 package.json 与 CLAUDE.mdbun install # 安装依赖monorepo 内 bun dev # 启动 Vite 开发服务器默认打开 src/demo/html/index.html bun start # 启动 Storybook 开发服务器端口 6006 bun run build # 完整生产构建Storybook 库构建tsc -b vite build bun lint # ESLint 检查--max-warnings0零警告门槛测试采用 Vitest 三项目结构见 vitest.config.tsatomicNode.js 环境单测src/test/ts/atomic/**/*.spec.tsbrowser基于 Playwright 的真实浏览器交互测试src/test/ts/browser/**/*.spec.{ts,tsx}visual视觉回归测试*.visual.spec.{ts,tsx}使用renderVisual辅助函数渲染真实组件状态并通过toMatchScreenshot比对截图基线存放在__screenshots__/目录。视觉回归有严格的平台约定基线始终以 Linux 渲染为准。本地开发时应通过 Docker/Colima 启动的 Playwright 浏览器服务器执行直接在本机跑 visual 项目会污染 Linux 基线。相关命令bun run test-browser-headless # 无头浏览器测试 bun run test-browser-manual # 可见浏览器测试 bun run test-visual-local # 本地视觉回归可追加文件过滤如 Button.visual bun run test-visual-local-update # 更新视觉回归基线截图首次克隆仓库还需拉取 git-lfs 中的截图基线git lfs fetch git lfs pull。新增组件规范按 CONTRIBUTING.md 的流程在src/main/ts/components/新建组件目录 → 添加Component.tsx→ 编写.stories.tsx→ 在src/test/ts/browser/components/添加行为测试与ComponentName.visual.spec.tsx视觉回归 → 在 main.ts 中导出。六、样式架构从 LESS 到 CSS Custom Properties 的三阶段迁移oxide-components的样式不内联在组件里而是统一收敛到Oxide设计系统modules/oxide以保证与既有皮肤向后兼容。根据 STYLING.md当前正在经历LESS → CSS的迁移划分为三个阶段阶段说明关键特征Legacy遗留组件完全用 LESS 样式化无现代 CSS 特性完全依赖 LESS 变量Transitional过渡在既有 LESS 样式中引入现代 CSSCSS Custom Properties 由特性开关控制LESS 变量仍存在CSS 回退到 LESS与旧皮肤向后兼容Modern CSS现代完全现代化版本纯现代 CSSLESS 彻底移除不再依赖 LESS 变量属破坏性变更旧皮肤不再支持约定所有新组件都应直接按 Transitional 阶段编写以最小化技术债累积。Transitional 阶段的七步迁移法TRANSITIONALCSS.md 给出了详细的操作指南用特性开关保护自定义属性在custom-properties-enabled true时才定义 CSS Custom Properties该开关定义于 modules/oxide/src/less/theme/globals/feature-flags.less.tox-button when (custom-properties-enabled true) { --tox-private-btn-padding: 4px; }新变量统一加tox-private前缀明确表示内部、非公开用途迁移期间可安全调整不会影响客户未来这些变量将演化为皮肤 API 并去掉private前缀。自定义属性必须带 LESS 回退值因为开关关闭时变量根本不存在回退可以是组件 LESS 变量、全局 LESS 变量或固定值.tox-button { padding: var(--tox-private-btn-padding, btn-padding); // 回退到组件 LESS 变量 border-radius: var(--tox-private-btn-border-radius, control-border-radius); // 回退到全局 LESS 变量 height: var(--tox-private-control-height, 36px); // 回退到固定值 }优先使用全局自定义属性避免局部重复定义全局变量同样带tox-private前缀如var(--tox-private-text-color, text-color)。共享变量提升到全局作用域被多个组件复用的 LESS 变量其对应 CSS Custom Property 应提升为全局组件变量禁止被其他组件交叉引用。颜色计算改用相对颜色语法LESS 的darken(bg, 6%)/lighten(bg, 14%)对应 CSS 的hsl(from ...)通道调整hsl(from var(--tox-private-bg) h s calc(l - 6)); hsl(from var(--tox-private-bg) h s calc(l 14));选择hsl()是因为它能直接操作lightness通道from关键字让浏览器从任意合法 CSS 颜色中提取通道值。用light-dark()取代主题相关 LESS 逻辑避免contrast()、.bg-luma-checker等 LESS 函数改用light-dark()与相对颜色.tox-button when (custom-properties-enabled true) { --tox-private-btn-bg: light-dark(#fff, #000); --tox-private-btn-bg: light-dark( hsl(from var(--tox-private-bg) h s calc(l 14)), hsl(from var(--tox-private-bg) h s calc(l - 6)) ); }关于light-dark()的主题控制TRANSITIONALCSS.md 特别说明了全局变量--tox-private-color-scheme的三种取值light强制编辑器仅使用浅色模式等价于当前默认模式dark强制编辑器仅使用深色模式等价于当前深色模式light dark让编辑器通过light-dark()动态跟随终端用户的系统主题这是最现代、系统集成度最高的方案。整个迁移的最终目标是CSS Custom Properties 中的声明保持纯 CSS避免混入 LESS 逻辑从而为平滑进入 Modern CSS 阶段铺路。七、文档资源速查项目定位与安装README.md样式迁移总览与三阶段定义STYLING.mdLegacy 组件到 Transitional 的完整转换指南TRANSITIONALCSS.md架构说明、开发流程与贡献规范CONTRIBUTING.md面向 AI 编码助手的项目速览命令、组件模式、测试约定CLAUDE.md变更记录CHANGELOG.md组件库本身基于 Storybook 提供交互式文档本地运行bun start后访问 http://localhost:6006 即可浏览全部组件的示例与 API 说明这也是理解各组件 props 与行为的最直观入口。赞分享前端富文本UI组件【免费下载链接】tinymceThe worlds #1 JavaScript library for rich text editing. Available for React, Vue and Angular项目地址https://gitcode.com/gh_mirrors/ti/tinymce点击查看免费下载相关推荐10分钟上手CloudProxy从安装到获取第一个代理IP的完整流程10分钟上手CloudProxy从安装到获取第一个代理IP的完整流程 CloudProxy是一款强大的云代理管理工具能够帮助用户轻松隐藏爬虫IP通过跨多个carbon-components-react 使用指南IBM Carbon Design System 的 React 组件库安装、Sass 配置与组件引入carbon components react 使用指南IBM Carbon Design System 的 React 组件库安装、Sass 配置与组件引入前端UI组件设计系统TDesign 组件库开发与安装指南TDesign 组件库开发与安装指南 前言 TDesign 是一款优秀的企业级设计体系与组件库解决方案为开发者提供了丰富的 UI 组件和设计资源。本文将详细介创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考