前端富文本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 組件庫它把編輯器界面中復(fù)用的 UI 部件按鈕、菜單、下拉框、提示氣泡、手風(fēng)琴等以類型安全的 TypeScript 組件形式沉淀下來并深度集成 TinyMCE 的 Oxide 設(shè)計系統(tǒng)。讀完本文你將掌握該組件庫的安裝方式、組件清單、源碼架構(gòu)、鍵盤導(dǎo)航與樣式遷移機制以及完整的本地開發(fā)與測試流程。一、項目定位TinyMCE 的 React UI 組件集合根據(jù) README.md 的定義oxide-components是a collection of various react components that would be used in the TinyMCE editor——即一組用于構(gòu)建 TinyMCE 編輯器界面的 React 組件集合。它不是一個獨立可用的 UI 框架而是與 TinyMCE 編輯器生態(tài)深度綁定組件的外觀樣式由 modules/oxide 設(shè)計系統(tǒng)提供底層依賴則來自 TinyMCE 生態(tài)的基礎(chǔ)庫。從 package.json 可以看到其核心依賴ephox/katamari函數(shù)式工具集數(shù)組、對象、類型判斷等ephox/sugarDOM 操作與遍歷工具ephox/sand瀏覽器特性探測與平臺判斷peerDependencies 要求react與react-dom均為^18.3.1。組件庫由 vite.config.ts 以 library 模式構(gòu)建入口為 src/main/ts/main.ts產(chǎn)物輸出為 ES 格式formats: [es]到lib/main.js同時把react、react-dom等外部化避免重復(fù)打包。二、安裝方式oxide-components以 npm 包形式發(fā)布官方包名為tinymce/oxide-components。按 README.md 的說明通過 npm 即可安裝npm install tinymce/oxide-components由于該包將react和react-dom聲明為 peerDependencies安裝時宿主項目必須自行提供 React 18.3.1 及以上版本包本身不會捆綁 React 運行時。需要說明的是當(dāng)前倉庫中的 package.json 標(biāo)記了private: true且版本號為0.0.2說明該模塊仍在 TinyMCE monorepo 內(nèi)部迭代演進中。三、組件清單與目錄結(jié)構(gòu)組件庫的公開 API 全部由 src/main/ts/main.ts 統(tǒng)一導(dǎo)出主要分為四類1. 通用 UI 組件src/main/ts/components/組件源碼位置用途Button/IconButtoncomponents/button / components/iconbutton基礎(chǔ)按鈕與純圖標(biāo)按鈕Menu/MenuRenderercomponents/menu菜單含Item、ToggleItem、SubmenuItem、DividerDropdowncomponents/dropdown下拉彈出層基于 CSS anchor positioning 定位Tooltipcomponents/tooltip提示氣泡暴露tooltipsEventTargetAlertcomponents/alert提示/告警條Accordioncomponents/accordion手風(fēng)琴折疊面板Card/CardListcomponents/card卡片與卡片列表Confirmation/ConfirmationHost/useConfirmationApicomponents/confirmation確認對話框及命令式 APIContextToolbarcomponents/contexttoolbar上下文工具欄Draggablecomponents/draggable拖拽容器ExpandableBoxcomponents/expandablebox可展開/收起盒子FloatingSidebarcomponents/floatingsidebar懸浮側(cè)邊欄Iconcomponents/icon圖標(biāo)渲染SegmentedControlcomponents/segmentedcontrol分段選擇控件ToolbarInputFormcomponents/toolbarInputForm工具欄輸入表單AutoResizingTextareacomponents/autoresizingtextarea自適應(yīng)高度文本域2. AI 定制組件src/main/ts/bespoke/tinymceai/針對 TinyMCE 的 AI 能力提供三個專用部件UserPromptBubble用戶提示氣泡、Spinner加載指示器、Tag標(biāo)簽。3. 鍵盤導(dǎo)航系統(tǒng)src/main/ts/keynav/這是一套完整的可訪問性基礎(chǔ)設(shè)施通過 React HooksKeyboardNavigationHooks.ts將鍵盤事件綁定到組件支持多種導(dǎo)航模式FlowTypekeyboard/flowtype焦點在容器內(nèi)按流向移動TabbingType / SpecialType / ExecutionType / EscapingTypekeyboardTab 切換、特殊鍵、回車執(zhí)行、Esc 逃逸等navigation/子目錄提供底層焦點移動算法ArrNavigation、DomNavigation、DomPinpoint等。例如Menu.Root內(nèi)部使用useFlowKeyNavigation建立流向?qū)Ш讲⒃趻燧d時聚焦第一個可用項。4. 工具與上下文src/main/ts/utils/、contexts/Bem.ts類型安全的 BEM 類名生成器直接引用tinymce/oxide/skins/ui/default/skin.ts導(dǎo)出的Classes類型做編譯期校驗ContentUiBem.ts面向內(nèi)容區(qū)content UI的 BEM 助手FocusHelpers.ts焦點管理UniverseContext通過UniverseProvider/useUniverse向組件注入編輯器環(huán)境資源UniverseTypes.tsx。四、源碼級架構(gòu)模式1. 類型安全的 BEM 類名每個組件都通過Bem.block/Bem.element生成 Oxide 皮膚類名。以 Button.tsx 為例variant屬性primary/secondary/outlined/naked與active狀態(tài)會被編譯為對應(yīng) BEM 類// variantprimary, activetrue 時生成 tox-button tox-button--active className{${calculateClassFromVariant(variant, { enabled: active })} ${className ?? }}Bem.ts 的核心價值在于它用 TypeScript 模板字面量類型把Classes拆解為Block、BlockModifier、BlockElement、BlockElementModifier四類從而在編譯期就禁止寫出 Oxide 皮膚中不存在的類名。需要留意的是類型約束作用在輸入?yún)?shù)上block()返回的仍是普通string。2. Storybook 驅(qū)動的開發(fā)模式每個組件都有配套的Component.stories.tsx如 Button.stories.tsx用于文檔與交互演示按 CONTRIBUTING.md 的約定組件文件、stories 文件、工具文件ComponentUtils.ts三者分離復(fù)雜邏輯不混入 UI 代碼。3. 組合示例Tooltip Dropdown 同觸發(fā)器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透傳給按鈕子元素從而轉(zhuǎn)發(fā)Tooltip.Trigger注入的鼠標(biāo)/焦點事件處理器兩個組件的 ref 最終通過 ref 轉(zhuǎn)發(fā)鏈指向同一個按鈕 DOM 節(jié)點。五、開發(fā)、構(gòu)建與測試工作流常用腳本來自 package.json 與 CLAUDE.mdbun install # 安裝依賴monorepo 內(nèi) bun dev # 啟動 Vite 開發(fā)服務(wù)器默認打開 src/demo/html/index.html bun start # 啟動 Storybook 開發(fā)服務(wù)器端口 6006 bun run build # 完整生產(chǎn)構(gòu)建Storybook 庫構(gòu)建tsc -b vite build bun lint # ESLint 檢查--max-warnings0零警告門檻測試采用 Vitest 三項目結(jié)構(gòu)見 vitest.config.tsatomicNode.js 環(huán)境單測src/test/ts/atomic/**/*.spec.tsbrowser基于 Playwright 的真實瀏覽器交互測試src/test/ts/browser/**/*.spec.{ts,tsx}visual視覺回歸測試*.visual.spec.{ts,tsx}使用renderVisual輔助函數(shù)渲染真實組件狀態(tài)并通過toMatchScreenshot比對截圖基線存放在__screenshots__/目錄。視覺回歸有嚴格的平臺約定基線始終以 Linux 渲染為準(zhǔn)。本地開發(fā)時應(yīng)通過 Docker/Colima 啟動的 Playwright 瀏覽器服務(wù)器執(zhí)行直接在本機跑 visual 項目會污染 Linux 基線。相關(guān)命令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。新增組件規(guī)范按 CONTRIBUTING.md 的流程在src/main/ts/components/新建組件目錄 → 添加Component.tsx→ 編寫.stories.tsx→ 在src/test/ts/browser/components/添加行為測試與ComponentName.visual.spec.tsx視覺回歸 → 在 main.ts 中導(dǎo)出。六、樣式架構(gòu)從 LESS 到 CSS Custom Properties 的三階段遷移oxide-components的樣式不內(nèi)聯(lián)在組件里而是統(tǒng)一收斂到Oxide設(shè)計系統(tǒng)modules/oxide以保證與既有皮膚向后兼容。根據(jù) STYLING.md當(dāng)前正在經(jīng)歷LESS → CSS的遷移劃分為三個階段階段說明關(guān)鍵特征Legacy遺留組件完全用 LESS 樣式化無現(xiàn)代 CSS 特性完全依賴 LESS 變量Transitional過渡在既有 LESS 樣式中引入現(xiàn)代 CSSCSS Custom Properties 由特性開關(guān)控制LESS 變量仍存在CSS 回退到 LESS與舊皮膚向后兼容Modern CSS現(xiàn)代完全現(xiàn)代化版本純現(xiàn)代 CSSLESS 徹底移除不再依賴 LESS 變量屬破壞性變更舊皮膚不再支持約定所有新組件都應(yīng)直接按 Transitional 階段編寫以最小化技術(shù)債累積。Transitional 階段的七步遷移法TRANSITIONALCSS.md 給出了詳細的操作指南用特性開關(guān)保護自定義屬性在custom-properties-enabled true時才定義 CSS Custom Properties該開關(guān)定義于 modules/oxide/src/less/theme/globals/feature-flags.less.tox-button when (custom-properties-enabled true) { --tox-private-btn-padding: 4px; }新變量統(tǒng)一加tox-private前綴明確表示內(nèi)部、非公開用途遷移期間可安全調(diào)整不會影響客戶未來這些變量將演化為皮膚 API 并去掉private前綴。自定義屬性必須帶 LESS 回退值因為開關(guān)關(guān)閉時變量根本不存在回退可以是組件 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); // 回退到固定值 }優(yōu)先使用全局自定義屬性避免局部重復(fù)定義全局變量同樣帶tox-private前綴如var(--tox-private-text-color, text-color)。共享變量提升到全局作用域被多個組件復(fù)用的 LESS 變量其對應(yīng) CSS Custom Property 應(yīng)提升為全局組件變量禁止被其他組件交叉引用。顏色計算改用相對顏色語法LESS 的darken(bg, 6%)/lighten(bg, 14%)對應(yīng) CSS 的hsl(from ...)通道調(diào)整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關(guān)鍵字讓瀏覽器從任意合法 CSS 顏色中提取通道值。用light-dark()取代主題相關(guān) LESS 邏輯避免contrast()、.bg-luma-checker等 LESS 函數(shù)改用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)) ); }關(guān)于light-dark()的主題控制TRANSITIONALCSS.md 特別說明了全局變量--tox-private-color-scheme的三種取值light強制編輯器僅使用淺色模式等價于當(dāng)前默認模式dark強制編輯器僅使用深色模式等價于當(dāng)前深色模式light dark讓編輯器通過light-dark()動態(tài)跟隨終端用戶的系統(tǒng)主題這是最現(xiàn)代、系統(tǒng)集成度最高的方案。整個遷移的最終目標(biāo)是CSS Custom Properties 中的聲明保持純 CSS避免混入 LESS 邏輯從而為平滑進入 Modern CSS 階段鋪路。七、文檔資源速查項目定位與安裝README.md樣式遷移總覽與三階段定義STYLING.mdLegacy 組件到 Transitional 的完整轉(zhuǎn)換指南TRANSITIONALCSS.md架構(gòu)說明、開發(fā)流程與貢獻規(guī)范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點擊查看免費下載相關(guān)推薦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組件設(shè)計系統(tǒng)TDesign 組件庫開發(fā)與安裝指南TDesign 組件庫開發(fā)與安裝指南 前言 TDesign 是一款優(yōu)秀的企業(yè)級設(shè)計體系與組件庫解決方案為開發(fā)者提供了豐富的 UI 組件和設(shè)計資源。本文將詳細介創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考