JavaScript UI 库 Webix 11.1 发布：富文本与多组件升级焕新体验-控件新闻-慧都网

JavaScript UI 库 Webix 11.1 发布：富文本与多组件升级焕新体验

翻译|产品更新|编辑：张蓉|2025-04-28 14:28:05.937|阅读 29 次

概述：Webix 是一款强大的 JavaScript UI 库，提供 100 + 预制且高度可定制的组件，涵盖数据表格、图表、表单等，支持数据绑定、动态加载等功能，能帮助开发者快速构建交互性强、响应式的 Web 应用程序，适用于各类复杂的前端开发场景。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

富文本编辑器 —— 一款全新的 Webix 组件

——这款组件是一款所见即所得的工具，可帮助用户创建丰富的内容，比如设置文本样式、添加图片、插入链接、使用表情符号或特殊字符。所以，如果你想在自己的项目中实现任何内容创建功能，或者你的应用程序需要处理文本，那么富文本编辑器正是你所需要的。

这款富文本编辑器基于 Webix Jet 应用程序开发，既可初始化为 Jet 应用程序，也能作为 Webix 视图使用。其基础界面包含工具栏与文本编辑器，还支持同时启用菜单栏。此外，工具栏和菜单栏均可定制，用户能按需添加按钮、保留功能组，或使用及自定义菜单选项。

rich-text-editor-release-webix-11-1

让我们更深入地了解一下这款组件所提供的功能：

1、经典和文档布局模式；
2、内置皮肤样式：材料风格、迷你风格、扁平风格、紧凑风格、对比风格；
3、便捷的文本样式设置：用户可以选择字体及其字号、行高、文本颜色、背景4、颜色以及对齐方式；
5、打印功能；
6、项目符号列表和编号列表；
7、链接 / 图片 / 表情符号 / 特殊字符插入；
8、全屏模式；
9、图片对齐和编辑；
10、可同时使用菜单栏和工具栏；
11、导入 / 导出功能；
12、可定制性，包括设置自定义区域语言的可能性。
欲了解有关这款新组件的更多详细信息，请查看相关文档。

核心更新

从 11.1 版本开始，Webix 支持使用 QWERTY（默认）、QWERTZ 和 AZERTY 键盘布局来创建热键。这意味着该库的用户现在可以利用这些键盘布局所提供的所有字符来设置热键。例如，包含特殊字符 “Ö” 的 Ctrl+Ö 组合键将被识别为有效的热键。

文件管理器和文档管理器更新

这次，文件管理器新增了一项功能，便于处理大型数据集。现在，当用户打开特定文件夹或使用搜索栏时，你可以设置应用程序将加载的项目（文件 / 文件夹）数量。
在你的文件管理器配置设置中添加 “limit” 属性，并定义你想要加载的项目数量：

一旦定义了 “limit” 属性，并且数据集的大小超过了该限制，那么将只会加载部分数据，同时在文件管理器右侧（该组件显示当前文件夹内容的区域）的面包屑导航旁边会出现一个警告图标。请注意，如果已加载的文件数量未超过限制，你将不会看到该图标。
将光标移到该图标上，你就会看到一个工具提示，它会显示出已加载的文件数量占文件总数的比例。

当你在文件管理器中设置了 “limit”（限制）属性时，这并不意味着用户就再也无法加载所有文件了（至少只要你的需求和规格允许的话 —— 一切都是可自定义的）。他们仍然可以通过用户界面来实现这一点，方法是点击刷新图标，然后在菜单中选择 “无限制重新加载” 选项（刷新图标位于该组件右侧，面包屑导航的旁边）。

file-manager-limit-property-refresh-without-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@wqylolg.cn

上一篇：Visual Studio .NET 插件CodeRush全新发布v24.2.4——组织成员功能增强