Telerik UI for ASP.NET Core是用于跨平臺響應式Web和云開發的最完整的UI工具集，擁有超過60個由Kendo UI支持的ASP.NET核心組件。它的響應式和自適應的HTML5網格，提供從過濾、排序數據到分頁和分層數據分組等100多項高級功能。

Telerik UI for ASP.NET Core的編輯器是一個多功能的所見即所得組件，使開發者能創建、可視化和編輯HTML。它是一個相當復雜的組件，具有多個內置功能。

在本文中，我們將重點介紹配置和定制編輯器的七種方法，以便它更好地適應不同的用例。

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

默認和自定義工具

您可以通過只設置它的Name選項來初始化編輯器：

@(Html.Kendo().Editor()
.Name("editor")
)

即使沒有額外的配置，Editor也將具有完整的功能，并將在其工具欄中顯示一組默認工具。如果您想要添加更多的內置工具，可以使用tools集合并列出希望組件顯示的工具。

在下面的代碼片段中，Pdf和Print被添加到Editor 的工具配置中。

@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => {
//list the tools...
tools.Pdf();
tools.Print();
})
)

注意，這將在Editor默認顯示的工具之后添加列出的工具。

 您可能想要刪除默認工具，而只顯示在Tools配置中列出的工具，只需要添加Clear工具，然后列出想要的工具：

@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools =>
{
tools.Clear();
tools.Bold().Italic().Underline().Strikethrough();
tools.Pdf();
tools.Print();
})
)

Custom（定制）工具也可以通過CustomButton選項添加到工具欄中，下面的示例展示了如何包含一個自定義工具，該工具可以在Editor的內容中添加一條水平線(<hr />)。

@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools
.CustomButton(cb => cb.Name("custom").ToolTip("Insert a horizontal rule").Exec(@<text>
function(e) {
var editor = $("#editor").data("kendoEditor");
editor.exec("insertHtml", { value: "<hr />" });
}
</text>))
)
)

CustomButton工具有一個Exec選項，允許您附加一個處理程序，可以在其中執行自定義邏輯。在這種情況下，邏輯使用Editor的API來插入一條水平規則。

樣式化編輯器的內容

編輯器在iframe中呈現其內容，因此添加到視圖中的自定義CSS不能以內容為目標。ditor提供了將樣式表導入iframe的選項，這允許您自定義內容中呈現的HTML的外觀。

讓我們來看一個例子。

我們想要一個更大字體大小的文本在編輯器的內容中，而且無序列表的圖標應該是紅色的。

1. 首先將在項目中添加一個樣式表，其名稱和位置如下：Content/Editor/editorStyles.css。在樣式表中，我們將添加一些自定義CSS規則，并更改想要的字體大小和圖標顏色。

body {
font-size: 16px;
}
li::marker {
color: red;
}

2. 接下來，我們在編輯器中設置樣式表配置，并指向在上一步中添加到項目中的樣式表文件：

@(Html.Kendo().Editor()
.Name("editor")
.StyleSheets(css => css
.Add(Url.Content("~/Content/Editor/editorStyles.css"))
)
.Value(@<text>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</text>)
)

除了設置樣式表配置之外，我們還傳遞了一個典型的無序列表作為組件的值。

3. 下面的屏幕截圖演示了結果。

添加到editorStyles.css樣式表中的兩個CSS規則都生效了：列表項文本的字體大小為16px，項目符號為紅色。

新行選項

當鼠標插入符號位于編輯器中的一行文本上并按Enter鍵時，編輯器將創建一個新行。默認情況下，新行被換行到段落(<p>)元素中，一種可能的替代方法是Editor插入換行符(<br>)元素來替代段落。

沒有配置選項允許您在Editor的聲明中切換此操作，但可以通過幾行JavaScript實現。方法如下：

<script>
var defaultTools = kendo.ui.Editor.defaultTools;

defaultTools["insertLineBreak"].options.shift = false;
delete defaultTools["insertParagraph"].options;
</script>

@(Html.Kendo().Editor()
.Name("editor")
)

Snippets

Snippets是一種特殊類型的工具，您可以在編輯器工具集合中配置它，它能在Editor的內容中快速添加預定義的HTML片段。在涉及添加不會更改的內容的場景中，特別是當用戶必須多次添加內容或添加一組重復的HTML片段時，它很有幫助。

在下面的示例中，我們包含了兩個片段：第一個包含圖像的HTML(例如，公司徽標)，第二個包含示例簽名的HTML。

@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools
.Snippets(snippets => snippets
.Add("Logo", "<img loading='lazy' src='//demos.telerik.com/aspnet-core/shared/images/site/devcraft-ninja-small.svg' alt='devcraft ninja image'>")
.Add("Signature", "<p>Regards,<br /> John Doe,<br /><a href='mailto:john.doe@example.com'>john.doe@example.com</a></p>")
)
)

.HtmlAttributes(new { style = "height:300px" })
)

下面的截圖顯示了添加的圖像和簽名，用戶不需要輸入HTML， 在Insert HTML工具的下拉菜單中選擇相應的選項時，它會自動添加。

編碼

當您將Editor的值提交給服務器時，在表單中使用它會注意到默認情況下，該值中的HTML標記被編碼發送給服務器，Encode選項啟用/禁用值的編碼。讓我們看看它們的區別：

@(Html.Kendo().Editor()
.Name("editor")
.Value("<p>some text</p>")
)

上面的Editor啟用了編碼(默認情況下)，它的值將以編碼方式提交：&lt;p&gt;some text&lt;/p&gt;

如果您不希望該值以編碼的方式提交，請禁用Encode選項：

@(Html.Kendo().Editor()
.Name("editor")
.Encode(false)
.Value("<p>some text</p>")
)

如果禁用編碼，則該值將以未編碼的方式提交：<p>some text&lt;/p>

不變的元素

某些用例可能需要限制用戶編輯文檔部分內容的能力，不可變元素特性可以幫助您完成這項任務。

啟用Immutables選項并聲明編輯器的內容：

@(Html.Kendo().Editor()
.Name("editor")
.Immutables(true)
.Value(@<text>
<div contenteditable="false" style="background-color: lightgray">
<h3>Company Name</h3>
(immutable content)
</div>
<div>You can edit the content of this div element</div>
</text>)
)

為了防止用戶編輯特定元素的內容，將它們的contentitable DOM屬性設置為false。在上面的例子中，第一個div元素的內容是不可編輯的。

PDF導出選項

在默認和自定義工具部分，我們將PDF導出工具添加到編輯器的工具欄中。Editor在其根級別上有一個專用的PDF配置，它允許進一步定制導出的PDF文檔。

@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools =>
{
tools.Pdf();
})
.Value("<a href='//www.telerik.com'>Visit telerik.com!</a> ")
.Pdf(pdf => pdf
.Author("John Doe")
.Title("My Pdf Document")
.Margin(20, 20, 20, 20)
.PaperSize("A4")
.JpegQuality(1)
.AvoidLinks(false)
.ForceProxy(true)
.ProxyURL(Url.Action("Pdf_Export_Save", "Home"))
)
)

以下是您可以配置的一些PDF相關選項：

• Author和Title在生成的PDF文檔中使用相同的名稱設置屬性。
• Margin指定上、右、下和左邊距，該選項接受字符串或雙精度值。
• PaperSize默認設置為“auto”，這意味著紙張大小將由導出內容的大小決定，但您可以配置一個預定義的大小值，如“A4”或“A3”。
• 如果您想增加或減少導出文檔中的圖像質量，JpegQuality是一個可以設置的有用選項。它接受從0到1的值，默認質量為0.92。
• 啟用AvoidLinks選項可確保在編輯器內容中工作的鏈接不會被導出為PDF文檔中的實際工作鏈接。
• ForceProxy和ProxyURL選項通常一起使用。后者用于指定負責在服務器上保存PDF文件的服務器端代理的URL，前者確保內容將被發送到代理URL，即使瀏覽器支持本地保存文件。現代瀏覽器支持本地保存文件，這是Editor使用的默認保存文件的方式，因此要強制服務器導出，請設置這兩個選項。

這是編輯器的一些自定義選項的峰值，該組件具有多個特性和HTML編輯功能，以及可以探索和利用的廣泛API，來實現所需的場景。