您的Angular應用程序可能需要允許用戶添加帶有格式化選項的文本、圖像、表格、外觀樣式和/或鏈接，使用Kendo UI for Angular的編輯器，可以輕松搞定這些！

Kendo UI for Angular是專業級的Angular UI組件庫，不僅是將其他供應商提供的現有組件封裝起來，telerik致力于提供純粹高性能的Angular UI組件，而無需任何jQuery依賴關系。無論您是使用TypeScript還是JavaScript開發Angular應用程序，Kendo UI for Angular都能為Angular項目提供專業的、企業級UI組件。

Kendo UI R1 2023 SP1正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

開發者可能需要構建一種許多用戶需要添加文本的Angular應用，比如博客或CMS、電子郵件、評論或在線編輯器，在這些應用程序中，用戶應該能夠添加簡單或豐富的文本與格式選項，圖像，表格，外觀樣式和/或鏈接。

Kendo UI for Angular的編輯器提供了一種簡單的方法來創建富文本內容，它是一個功能豐富的文本編輯器組件，為Angular應用提供了巨大的優勢，比如：

• 使用Schematics輕松集成到Angular應用程序中。
• 高度自定義，具有更改編輯器外觀和操作的選項。
• 高級功能，如富文本格式、拼寫檢查、圖像和文件嵌入。
• 設計為響應和適應不同的屏幕尺寸和設備。
• 與其他Kendo UI組件輕松集成，創建無縫的用戶體驗。

場景

現在一家公司需要創建一個用戶可以寫筆記的頁面，但也有一個豐富的編輯器格式，可以選擇更改字體類型和顏色、添加項目符號、超鏈接和表格。

這些只是Kendo UI Angular編輯器默認提供的選項列表中的一部分。

建立項目

開始使用Angular CLI構建項目，可以使用以下命令安裝它：

npm install -g @angular/cli

安裝好Angular CLI后，運行以下命令創建項目：

ng new my-notes-app

現在應用已經創建好了，然后進入它并運行初始的npm install：

cd my-notes-app

接下來，運行以下命令安裝Kendo UI for Angular編輯器包：

ng add @progress/kendo-angular-editor

Angular 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"></p>

HTML呈現出樣式和格式，我們有一個基本的編輯器，可以在工具欄中添加更多選項。

編輯器工具欄

默認情況下，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
view="gradient"
></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改為粗體和斜體，并在編輯器中將背景設置為紅色。但是它只在編輯器中更改，而不會在內容區域中應用背景顏色。