翻譯|使用教程|編輯:龔雪|2023-07-31 11:25:04.790|閱讀 122 次
概述:如果想要配置和定制你的編輯器,這個所見即所得的Telerik UI for ASP.NET Core組件會很符合確切需求,歡迎下載最新版體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
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是一種特殊類型的工具,您可以在編輯器工具集合中配置它,它能在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啟用了編碼(默認情況下),它的值將以編碼方式提交:<p>some text</p>
如果您不希望該值以編碼的方式提交,請禁用Encode選項:
@(Html.Kendo().Editor()
.Name("editor")
.Encode(false)
.Value("<p>some text</p>")
)
如果禁用編碼,則該值將以未編碼的方式提交:<p>some text</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導出工具添加到編輯器的工具欄中。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相關選項:
這是編輯器的一些自定義選項的峰值,該組件具有多個特性和HTML編輯功能,以及可以探索和利用的廣泛API,來實現所需的場景。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網