JavaScript UI 庫 Webix 11.1 發布:富文本與多組件升級煥新體驗
翻譯|產品更新|編輯:張蓉|2025-04-28 14:28:05.937|閱讀
133 次
概述:Webix 是一款強大的 JavaScript UI 庫,提供 100 + 預制且高度可定制的組件,涵蓋數據表格、圖表、表單等,支持數據綁定、動態加載等功能,能幫助開發者快速構建交互性強、響應式的 Web 應用程序,適用于各類復雜的前端開發場景 。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Webix 是一款強大的 JavaScript UI 庫,提供 100 + 預制且高度可定制的組件,涵蓋數據表格、圖表、表單等,支持數據綁定、動態加載等功能,能幫助開發者快速構建交互性強、響應式的 Web 應用程序,適用于各類復雜的前端開發場景 。
近日,Webix 11.1 版本發布啦!這次,我們非常興奮地向大家介紹一款全新的 Webix 組件 —— 富文本編輯器。這款便捷工具為用戶開啟更多高級功能,助力拓展項目的功能。我們還為一些復雜組件添加新功能并進行更新升級,這些組件包括文件管理器、文檔管理器、電子表格、調度器、圖表、待辦事項、甘特圖和用戶管理器。現在,讓我們進一步深入了解這些更新內容。
Webix 正版試用下載
富文本編輯器 —— 一款全新的 Webix 組件
——這款組件是一款所見即所得的工具,可幫助用戶創建豐富的內容,比如設置文本樣式、添加圖片、插入鏈接、使用表情符號或特殊字符。所以,如果你想在自己的項目中實現任何內容創建功能,或者你的應用程序需要處理文本,那么富文本編輯器正是你所需要的。
這款富文本編輯器基于 Webix Jet 應用程序開發,既可初始化為 Jet 應用程序,也能作為 Webix 視圖使用。其基礎界面包含工具欄與文本編輯器,還支持同時啟用菜單欄。此外,工具欄和菜單欄均可定制,用戶能按需添加按鈕、保留功能組,或使用及自定義菜單選項 。
讓我們更深入地了解一下這款組件所提供的功能:
1、經典和文檔布局模式;
2、內置皮膚樣式:材料風格、迷你風格、扁平風格、緊湊風格、對比風格;
3、便捷的文本樣式設置:用戶可以選擇字體及其字號、行高、文本顏色、背景4、顏色以及對齊方式;
5、打印功能;
6、項目符號列表和編號列表;
7、鏈接 / 圖片 / 表情符號 / 特殊字符插入;
8、全屏模式;
9、圖片對齊和編輯;
10、可同時使用菜單欄和工具欄;
11、導入 / 導出功能;
12、可定制性,包括設置自定義區域語言的可能性。
欲了解有關這款新組件的更多詳細信息,請查看相關文檔。
核心更新
從 11.1 版本開始,Webix 支持使用 QWERTY(默認)、QWERTZ 和 AZERTY 鍵盤布局來創建熱鍵。這意味著該庫的用戶現在可以利用這些鍵盤布局所提供的所有字符來設置熱鍵。例如,包含特殊字符 “?” 的 Ctrl+? 組合鍵將被識別為有效的熱鍵。
文件管理器和文檔管理器更新
這次,文件管理器新增了一項功能,便于處理大型數據集。現在,當用戶打開特定文件夾或使用搜索欄時,你可以設置應用程序將加載的項目(文件 / 文件夾)數量。
在你的文件管理器配置設置中添加 “limit” 屬性,并定義你想要加載的項目數量:
一旦定義了 “limit” 屬性,并且數據集的大小超過了該限制,那么將只會加載部分數據,同時在文件管理器右側(該組件顯示當前文件夾內容的區域)的面包屑導航旁邊會出現一個警告圖標。請注意,如果已加載的文件數量未超過限制,你將不會看到該圖標。
將光標移到該圖標上,你就會看到一個工具提示,它會顯示出已加載的文件數量占文件總數的比例。
當你在文件管理器中設置了 “limit”(限制)屬性時,這并不意味著用戶就再也無法加載所有文件了(至少只要你的需求和規格允許的話 —— 一切都是可自定義的)。他們仍然可以通過用戶界面來實現這一點,方法是點擊刷新圖標,然后在菜單中選擇 “無限制重新加載” 選項(刷新圖標位于該組件右側,面包屑導航的旁邊)。
當用戶選擇 “無限制重新加載” 時,所有文件都會被加載到文件夾中,并且在緩存填滿之前,只有不帶選項的常規 “刷新” 功能可用。請注意,默認的緩存大小僅為 10 個文件夾。
文檔管理器中也提供加載限制功能。可以用與在文件管理器中相同的方式來設置這些限制。
除了 “限制” 屬性之外,文件管理器和文檔管理器現在還新增了一個 API 方法 selectFile,該方法允許通過文件的 ID 來選擇文件。
在這個版本中,文件管理器和文檔管理器還得到了功能增強,現在能夠顯示文件的完整路徑。從目錄中選擇一個文件或文件夾,或者從搜索結果中選擇一個。按下頂部欄中的 “預覽” 按鈕,你就會在項目詳情(信息部分)中看到文件的位置。如果你想導航到包含所選文件的文件夾,只需點擊該路徑,你就會進入到相應的文件夾。
Webix 11.1 版本中,電子表格 API 新增 addFormat、getFormat 等方法,方便處理單元格格式,原有的 setFormat 方法也增加了返回格式名稱的功能,且保留用于兼容舊版本。同時,電子表格引入 XSS 安全模式,限制單元格內 HTML 使用,對 IMAGE 方法插入圖像也設限,僅支持 Base64 格式且需同域加載。
在電子表格的配置中添加 xssSafe 參數,并將其設置為 true 以啟用該模式(該參數默認值為 false)。
1、XSS 安全模式下的轉義規則:開啟 XSS 安全模式后,電子表格會對簡單的 HTML、由數學方法生成的 HTML 以及數字格式的 HTML 進行轉義處理。
2、能生成 HTML 的數學函數:該組件具備多個在默認狀態下可生成 HTML 的數學函數,如 IMAGE(圖像)、HYPERLINK(超鏈接)、SPARKLINE(迷你圖)、CHECKBOX(復選框)、RADIO(單選按鈕)。
3、registerMathMethod 的新參數:
-
可以使用 registerMathMethod(注冊數學方法),此版本中它新增了 generateHTML(生成 HTML)參數。
-
若將 generateHTML 參數設為 true,那么所使用的方法在 XSS 安全模式下能夠生成 HTML。
-
需注意,要確保等號后面的單元格中僅包含所使用的方法,無其他內容。比如 = IMAGE (…) 能正常工作,但 = IMAGE (…)&”text” 將會被轉義。
電子表格的其他更新內容包括:現在可以使用 Ctrl 鍵加鼠標滾輪進行縮放操作,以及對格式化日期的用戶體驗進行了改進(如果某個單元格只顯示時間而不顯示日期,那么日期編輯器將以時間選擇器的形式打開)
調度器更新
本次更新優化了調度器 “單位模式” 下類別的顯示方式。該模式用于將事件分組,類別名稱展示在事件網格水平標尺上。此前版本的 “單位模式” 不支持水平滾動,類別數量較多時,所有類別擠在固定寬度內,單個單位顯示空間狹小,使用不便。
Webix 11.1 版本新增水平滾動功能,還支持設置單位最小寬度(默認為 300 像素) ,用戶可按需調整數值或關閉該功能。
如果你想自定義單位的寬度,請在配置中使用以下設置:
如果你想關閉最小寬度設置并且不使用滾動功能,可將minWidth設置為 0:
其他更新
除了本文中提到的增強功能外,以下是對其他用戶體驗改進的簡要說明:
-
待辦事項(ToDo):改進了搜索指示功能;
-
圖表(Diagram):新增了 Ctrl++(放大)、Ctrl+–(縮小)、Ctrl+0(重置縮放)熱鍵;
-
用戶管理器(User Manager):矩陣中可點擊的復選框處會顯示指針光標;
-
甘特圖(Gantt):現在,指定范圍之外的任務不會顯示在甘特圖的圖表區域中。
你可以在我們的 上查看 Webix 更新的完整列表。
慧都科技是?家?業數字化解決?案公司,專注于軟件、?油與?業領域,以深?的業務理解和?業經驗,幫助企業實現智能化轉型與持續競爭優勢。
慧都科技作為 Webix 的中國區合作伙伴,Webix 作為前端開發和數據可視化領域的領先技術提供商,通過其強大的 Webix UI Library 等工具,助力企業實現高效的應用開發與數據展示。Webix UI Library 支持多種功能(如數據綁定、動態加載、交互式組件等),提供簡潔高效的代碼編寫方式、靈活的布局設計以及豐富的可視化組件,幫助企業輕松應對各類應用開發需求,顯著提升開發效率并縮短項目周期。
標簽:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn