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

Telerik UI for ASP.NET Core的編輯器是一個多功能的所見即所得組件，使開發(fā)者能創(chuàng)建、可視化和編輯HTML。它是一個相當(dāng)復(fù)雜的組件，具有多個內(nèi)置功能。

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

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

默認(rèn)和自定義工具

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

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

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

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

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

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

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

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

Custom（定制）工具也可以通過CustomButton選項添加到工具欄中，下面的示例展示了如何包含一個自定義工具，該工具可以在Editor的內(nèi)容中添加一條水平線(<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選項，允許您附加一個處理程序，可以在其中執(zhí)行自定義邏輯。在這種情況下，邏輯使用Editor的API來插入一條水平規(guī)則。

樣式化編輯器的內(nèi)容

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

讓我們來看一個例子。

我們想要一個更大字體大小的文本在編輯器的內(nèi)容中，而且無序列表的圖標(biāo)應(yīng)該是紅色的。

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

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

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

@(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>)
)

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

3. 下面的屏幕截圖演示了結(jié)果。

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

新行選項

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

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

<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的內(nèi)容中快速添加預(yù)定義的HTML片段。在涉及添加不會更改的內(nèi)容的場景中，特別是當(dāng)用戶必須多次添加內(nèi)容或添加一組重復(fù)的HTML片段時，它很有幫助。

在下面的示例中，我們包含了兩個片段：第一個包含圖像的HTML(例如，公司徽標(biāo))，第二個包含示例簽名的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工具的下拉菜單中選擇相應(yīng)的選項時，它會自動添加。

編碼

當(dāng)您將Editor的值提交給服務(wù)器時，在表單中使用它會注意到默認(rèn)情況下，該值中的HTML標(biāo)記被編碼發(fā)送給服務(wù)器，Encode選項啟用/禁用值的編碼。讓我們看看它們的區(qū)別：

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

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

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

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

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

不變的元素

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

啟用Immutables選項并聲明編輯器的內(nèi)容：

@(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>)
)

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

PDF導(dǎo)出選項

 在默認(rèn)和自定義工具部分，我們將PDF導(dǎo)出工具添加到編輯器的工具欄中。Editor在其根級別上有一個專用的PDF配置，它允許進(jìn)一步定制導(dǎo)出的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相關(guān)選項：

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

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