要创建富文本内容？Kendo UI Angular组件有专门的编辑器应对！

您的Angular应用程序可能需要允许用户添加带有格式化选项的文本、图像、表格、外观样式和/或链接使用Kendo UI Angular的编辑器可以轻松搞定这些Kendo UI Angular是专业级的Angular UI组件库不仅是将其他供应商提供的现有组件封装起来telerik致力于提供纯粹高性能的Angular UI组件而无需任何jQuery依赖关系。无论您是使用TypeScript还是JavaScript开发Angular应用程序Kendo UI for Angular都能为Angular项目提供专业的、企业级UI组件。开发者可能需要构建一种许多用户需要添加文本的Angular应用比如博客或CMS、电子邮件、评论或在线编辑器在这些应用程序中用户应该能够添加简单或丰富的文本与格式选项图像表格外观样式和/或链接。Kendo UI Angular的编辑器提供了一种简单的方法来创建富文本内容它是一个功能丰富的文本编辑器组件为Angular应用提供了巨大的优势比如使用Schematics轻松集成到Angular应用程序中。高度自定义具有更改编辑器外观和操作的选项。高级功能如富文本格式、拼写检查、图像和文件嵌入。设计为响应和适应不同的屏幕尺寸和设备。与其他​​​​​​​Kendo UI组件轻松集成创建无缝的用户体验。场景现在一家公司需要创建一个用户可以写笔记的页面但也有一个丰富的编辑器格式可以选择更改字体类型和颜色、添加项目符号、超链接和表格。这些只是Kendo UI Angular编辑器默认提供的选项列表中的一部分。建立项目开始使用Angular CLI构建项目可以使用以下命令安装它npm install -g angular/cli安装好Angular CLI后运行以下命令创建项目ng new my-notes-app现在应用已经创建好了然后进入它并运行初始的npm installcd my-notes-app接下来运行以下命令安装Kendo UI for Angular编辑器包ng add progress/kendo-angular-editorAngular Schematics会自动将编辑器模块导入到Angular应用的app.module.ts文件中import { EditorModule } from progress/kendo-angular-editor;导入编辑器模块后继续删除app.component.html中的示例标记并将编辑器组件kendo-editor/kendo-editor标签添加到应用模板中kendo-editor/kendo-editor保存更改并使用ng -serve -o运行应用程序来自动打开浏览器。编辑器已经准备好了接下来添加一些交互性如呈现内容和 添加工具栏选项。编辑器默认情况下编辑器显示空内容想要设置默认内容并编辑该值。打开app.component.ts添加一个值为“hello from kendo”的新属性content。import { Component } from angular/core; import { DomSanitizer, SafeHtml } from angular/platform-browser; Component({ selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css], }) export class AppComponent { content hello from kendo; }接下来使用[(value)]和双向绑定将变量content绑定到编辑器并使用插值{{content}}来呈现内容的值。kendo-editor [(value)]content /kendo-editor {{content}}保存浏览器就会重新加载如果您在编辑器中输入一些文本并单击粗体选项则浏览器内容将更新。绑定HTML我们不使用插值来呈现值内容而是尝试使用属性innerHTML。p [innerHTML]content/pHTML呈现出样式和格式我们有一个基本的编辑器可以在工具栏中添加更多选项。编辑器工具栏默认情况下Kendo UI编辑器在工具栏中带有几个选项可以自定义和添加大量的选项列表如更改背景、打印按钮等。使用组件 Kendo -toolbar和 Kendo -toolbar-button将带有内容的操作添加到Kendo UI Editor按钮。因为我们正在添加kendo-toolbar所以默认按钮被删除只显示添加到工具栏的按钮。kendo-editor [(ngModel)]content kendo-toolbar kendo-toolbar-button kendoEditorBoldButton/kendo-toolbar-button kendo-toolbar-button kendoEditorItalicButton/kendo-toolbar-button kendo-toolbar-colorpicker kendoEditorForeColor /kendo-toolbar-colorpicker kendo-toolbar-colorpicker kendoEditorBackColor viewgradient /kendo-toolbar-colorpicker kendo-editor-insert-table-button/kendo-editor-insert-table-button kendo-toolbar-button kendoEditorPrintButton/kendo-toolbar-button /kendo-toolbar /kendo-editor在本文的演示中我们添加了一个表格将hello的样式从kendo改为粗体和斜体并在编辑器中将背景设置为红色。但是它只在编辑器中更改而不会在内容区域中应用背景颜色。