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

Kendo UI for Angular是專(zhuān)業(yè)級(jí)的Angular UI組件庫(kù)，不僅是將其他供應(yīng)商提供的現(xiàn)有組件封裝起來(lái)，telerik致力于提供純粹高性能的Angular UI組件，而無(wú)需任何jQuery依賴(lài)關(guān)系。無(wú)論您是使用TypeScript還是JavaScript開(kāi)發(fā)Angular應(yīng)用程序，Kendo UI for Angular都能為Angular項(xiàng)目提供專(zhuān)業(yè)的、企業(yè)級(jí)UI組件。

Kendo UI R1 2023 SP1正式版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

開(kāi)發(fā)者可能需要構(gòu)建一種許多用戶(hù)需要添加文本的Angular應(yīng)用，比如博客或CMS、電子郵件、評(píng)論或在線(xiàn)編輯器，在這些應(yīng)用程序中，用戶(hù)應(yīng)該能夠添加簡(jiǎn)單或豐富的文本與格式選項(xiàng)，圖像，表格，外觀(guān)樣式和/或鏈接。

Kendo UI for Angular的編輯器提供了一種簡(jiǎn)單的方法來(lái)創(chuàng)建富文本內(nèi)容，它是一個(gè)功能豐富的文本編輯器組件，為Angular應(yīng)用提供了巨大的優(yōu)勢(shì)，比如：

• 使用Schematics輕松集成到Angular應(yīng)用程序中。
• 高度自定義，具有更改編輯器外觀(guān)和操作的選項(xiàng)。
• 高級(jí)功能，如富文本格式、拼寫(xiě)檢查、圖像和文件嵌入。
• 設(shè)計(jì)為響應(yīng)和適應(yīng)不同的屏幕尺寸和設(shè)備。
• 與其他Kendo UI組件輕松集成，創(chuàng)建無(wú)縫的用戶(hù)體驗(yàn)。

場(chǎng)景

現(xiàn)在一家公司需要?jiǎng)?chuàng)建一個(gè)用戶(hù)可以寫(xiě)筆記的頁(yè)面，但也有一個(gè)豐富的編輯器格式，可以選擇更改字體類(lèi)型和顏色、添加項(xiàng)目符號(hào)、超鏈接和表格。

這些只是Kendo UI Angular編輯器默認(rèn)提供的選項(xiàng)列表中的一部分。

建立項(xiàng)目

開(kāi)始使用Angular CLI構(gòu)建項(xiàng)目，可以使用以下命令安裝它：

npm install -g @angular/cli

安裝好Angular CLI后，運(yùn)行以下命令創(chuàng)建項(xiàng)目：

ng new my-notes-app

現(xiàn)在應(yīng)用已經(jīng)創(chuàng)建好了，然后進(jìn)入它并運(yùn)行初始的npm install：

cd my-notes-app

接下來(lái)，運(yùn)行以下命令安裝Kendo UI for Angular編輯器包：

ng add @progress/kendo-angular-editor

Angular Schematics會(huì)自動(dòng)將編輯器模塊導(dǎo)入到Angular應(yīng)用的app.module.ts文件中：

import { EditorModule } from '@progress/kendo-angular-editor';

導(dǎo)入編輯器模塊后，繼續(xù)刪除app.component.html中的示例標(biāo)記，并將編輯器組件<kendo-editor></kendo-editor>標(biāo)簽添加到應(yīng)用模板中：

<kendo-editor></kendo-editor>

保存更改并使用ng -serve -o運(yùn)行應(yīng)用程序來(lái)自動(dòng)打開(kāi)瀏覽器。

編輯器已經(jīng)準(zhǔn)備好了，接下來(lái)添加一些交互性，如呈現(xiàn)內(nèi)容和 添加工具欄選項(xiàng)。

編輯器

默認(rèn)情況下，編輯器顯示空內(nèi)容，想要設(shè)置默認(rèn)內(nèi)容并編輯該值。

打開(kāi)app.component.ts，添加一個(gè)值為“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';
}

接下來(lái)，使用[(value)]和雙向綁定將變量content綁定到編輯器，并使用插值{{content}}來(lái)呈現(xiàn)內(nèi)容的值。

<kendo-editor [(value)]="content">
</kendo-editor>
{{content}}

保存瀏覽器就會(huì)重新加載，如果您在編輯器中輸入一些文本并單擊粗體選項(xiàng)，則瀏覽器內(nèi)容將更新。

綁定HTML

我們不使用插值來(lái)呈現(xiàn)值內(nèi)容，而是嘗試使用屬性innerHTML。

<p [innerHTML]="content"></p>

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

編輯器工具欄

默認(rèn)情況下，Kendo UI編輯器在工具欄中帶有幾個(gè)選項(xiàng)，可以自定義和添加大量的選項(xiàng)列表，如更改背景、打印按鈕等。

使用組件< Kendo -toolbar>和< Kendo -toolbar-button>，將帶有內(nèi)容的操作添加到Kendo UI Editor按鈕。因?yàn)槲覀冋谔砑觡endo-toolbar，所以默認(rèn)按鈕被刪除，只顯示添加到工具欄的按鈕。

<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>

在本文的演示中，我們添加了一個(gè)表格，將hello的樣式從kendo改為粗體和斜體，并在編輯器中將背景設(shè)置為紅色。但是它只在編輯器中更改，而不會(huì)在內(nèi)容區(qū)域中應(yīng)用背景顏色。