Froala
许多类在使用配置对象创建（实例化）类时使用快捷名称。快捷名称被称为别名（如果类扩展了 Ext.Component，则称为xtype）。别名/xtype 列在适用类的类名旁边，以便快速参考。
框架类或其成员可以指定为private或protected。否则，该类/成员为public。Public、protected和private是访问描述符，用于传达类或类成员的使用方式和时间。
Public 类和类成员可供任何其他类或应用程序代码使用，并且可以作为主要产品版本中稳定且持久存在的元素。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的public成员，旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员由框架内部使用，不打算供应用程序开发人员使用。私有类和成员可能会在任何时候更改或从框架中省略，恕不另行通知，并且不应依赖于应用程序逻辑。
static标签。*请参阅下面的静态。以下是一个示例类成员，我们可以对其进行分析以显示类成员的语法（在本例中，从 Ext.button.Button 类中查看的 lookupComponent 方法）。
让我们看看成员行的每个部分
lookupComponent）( item )）。Ext.Component）。对于不返回任何内容（除了 undefined）的方法，这可以省略，或者可以显示为用正斜杠 / 分隔的多个可能值，表示返回的内容可能取决于方法调用的结果（例如，如果 get 方法调用成功，则方法可能返回一个组件，如果失败则返回 false，这将显示为 Ext.Component/Boolean）。PROTECTED - 请参阅下面的标志部分）。Ext.container.Container）。如果成员来自当前类，则源类将显示为蓝色链接，如果它从祖先类或混合类继承而来，则显示为灰色。查看源代码）。item : Object）。undefined，则“返回”部分将记录返回的类或对象的类型以及描述（示例中的 Ext.Component）。自 3.4.0 可用 - 示例中未显示），紧接在成员描述之后。默认值：false）。API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();。false，则标记为可阻止的事件将不会触发。- 表示框架类。
- 单例框架类。*有关更多信息，请参阅单例标志。
- 组件类型框架类（Ext JS 框架中任何扩展 Ext.Component 的类）
- 表示该类、成员或指南在当前查看的版本中是新的
- 表示类型为 config 的类成员
- 表示类型为 property 的类成员
- 表示类型为 method 的类成员
- 表示类型为 event 的类成员
- 表示类型为 theme variable 的类成员
- 表示类型为 theme mixin 的类成员
- 表示该类、成员或指南在当前查看的版本中是新的
在 API 文档页面上的类名下方，有一行按钮，对应于当前类拥有的成员类型。每个按钮都显示了按类型划分的成员数量（此数量会随着过滤器的应用而更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单，其中包含该类型的所有成员，以便快速导航。
与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，紧挨着它们所对应的配置。Getter 和 Setter 方法文档将在配置行中找到，以便于参考。
您的页面历史记录保存在本地存储中，并在顶部标题栏下方（使用可用的空间）显示。默认情况下，仅显示与您当前查看的产品/版本匹配的页面搜索结果。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本的历史记录栏中的所有最近页面。
在历史记录配置菜单中，您还会看到最近页面访问的列表。结果按“当前产品/版本”和“全部”单选按钮进行过滤。单击 按钮将清除历史记录栏以及本地存储中的历史记录。
如果在历史记录配置菜单中选择了“全部”，则“在历史记录栏中显示产品详细信息”的复选框选项将被启用。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将鼠标悬停在历史记录栏中的页面名称上，也会显示产品/版本作为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上，还有一个过滤器输入字段，它使用过滤器字符串过滤成员行。除了按字符串过滤外，还可以按访问级别、继承和只读过滤类成员。这是使用页面顶部的复选框完成的。
API 类导航树底部的复选框过滤类列表，以包含或排除私有类。
单击空搜索字段将显示您最近的 10 次搜索，以便快速导航。
每个 API 文档页面（除了 Javascript 原语页面）都有一个与该类相关的元数据的菜单视图。此元数据视图将包含以下一项或多项
Ext.button.Button 类有一个别名 Ext.Button）。别名通常为了向后兼容而维护。默认情况下，可运行示例（Fiddle）会在页面上展开。您可以使用代码块左上角的箭头分别折叠和展开示例代码块。您也可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间保留。
默认情况下，类成员在页面上处于折叠状态。您可以使用成员行左侧的箭头图标或使用右上角的展开/折叠所有切换按钮全局展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致视图针对较小的外形尺寸进行优化。桌面视图和“移动”视图之间的主要区别在于
可以通过单击 API 文档页面顶部的类名称来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
ExtJS 7.x 具有适用于 Classic & Modern 工具包的 Premium 代码包。该包允许您在应用程序中使用 Froala WYSIWYG 编辑器。
该组件有两个版本：一个字段版本，用于在表单中使用，以及一个常规组件版本，用于其他任何地方。
这两个类都是 Froala WYSIWYG 编辑器的简单包装器，在 https://www.froala.com/wysiwyg-editor 中有记录。这些是 ExtJS 组件，因此您可以像使用任何其他组件一样使用它们，包括设置侦听器以检测组件事件和 Froala 本地事件。您也可以直接在 Froala 实例上运行 Froala 本地方法。
Froala 代码包可通过 Open Tooling (ext-gen) 作为 npm 包以及托管在 Sencha 的 CDN 上的 Sencha Cmd 包获得。
下面提供了详细安装步骤的链接，但简而言之，您必须
npm login --registry=https://npm.sencha.com --scope=@senchaext-gen 项目，然后运行 npm install @sencha/ext-froala-editor通过更新应用程序的 app.json 来配置您的应用程序以使用新的代码包。
在 app.json 中，将 froala-editor 添加到 requires 数组中。
{
// ...
"requires": [
"font-awesome",
"froala-editor"
],
// ...
有关 npm 仓库登录的详细信息，请参阅 登录 npm 仓库。
app.json requires 数组以包含该包，来配置您的应用程序以使用新的代码包。您必须将 Froala 路径添加到 workspace.json packages.dir 字符串中。
"packages": {
"dir": "...,${workspace.dir}/node_modules/@sencha/ext-froala-editor",
...
}
Froala 编辑器有两个版本。
Ext.froala.EditorExt.froala.EditorField这些组件是围绕 Froala 编辑器实例的包装器。它们的配置和使用方式相同，但字段版本扩展了 Ext.field.Field，因此可以赋予它 name 和 value，并可用于字段面板和表单面板。
有两个主要配置：value，它是编辑器的 HTML 值，以及 editor，它是正在创建的 Froala 编辑器实例的配置。
value 配置指定编辑器的初始值。value 是可绑定的，并且是默认绑定属性。请注意，value 是 HTMl，因此将包含 HTML 标签。
获取值示例
myFroalaComponent.setValue('Hello world!');
console.log(myFroalaComponent.getValue()); // Logs "<p>Hello world!</p>"
简单示例
在表单中，您可以使用字段版本。它的名称-值对将反映在表单提交中，或者在调用表单的 getValue() 时。
editor 配置允许您配置 Froala 编辑器实例。您可以使用任何 Froala 配置，如 Froala 选项 中所述。
要监听事件，请使用标准的 listeners 组件配置。您可以通过在事件名称上使用 froala 前缀来监听本机 Froala 事件。Froala 事件在 Froala 事件 中有记录。
此示例显示了一个 Froala 编辑器，它配置了对 change 事件的监听器，此外，还配置了对本机 Froala click 事件的监听器，该事件通过使用 _froala-+ 前缀指定。
要运行本机 Froala 方法，请使用 getEditor() 获取对 Froala 实例的引用，然后运行您想要的任何方法。Froala 方法在 Froala 方法 中有记录。
例如，要获取字符计数，您将使用此表达式
myFroalaComponent.getEditor().charCounter.count()
当创建 FroalaEditor 或 FroalaEditorField 时，需要几毫秒才能创建和初始化包装的 Froala 实例。在设置事件时，这是透明的，但如果您需要检测实例何时准备就绪，请使用 ready 事件。该实例还有一个 isReady 布尔属性，它最初为 false，并在组件初始化时变为 true。
此代码说明了属性和事件之间的关系。
要使用 Froala 编辑器的许可版本，您需要一个激活密钥，如 什么是激活密钥？ 中所述。
注意：如果 Froala 编辑器在没有激活密钥的情况下部署到已发布的网站，它将显示一个红色的未授权横幅。Sencha Enterprise 客户可以通过发送电子邮件到 [email protected]（主题为“Sencha Ext JS 7.0 Froala 密钥请求”）并提供他们的 Sencha ID/客户帐户，来请求免费的 12 个月 Froala Enterprise 许可证，用于与 Froala 组件一起使用。
然后，您可以在应用程序的 app.json 中，在一个名为 froala 的配置块中指定密钥。这是一个示例，它显示了 app.json 中的一部分，其中包含 froala-editor 代码包的 requires 条目，以及激活密钥的规范。
{
"name": "MyApp",
"namespace": "MyApp",
"framework": "ext",
"requires": ["font-awesome", "froala-editor"],
"froala": {
"activation-key": "my-activation-key"
}
//...
}
您还可以在我们的 厨房水槽 中找到其他示例。
Ext JS | 使用条款