Blazor编辑器概述

的Blazor HTML编辑器组件使用户能够通过What-You-See-Is-What-You-Get (WYSIWYG)界面创建丰富的文本内容，并提供一组用于创建、编辑和格式化文本、段落、列表和其他HTML元素的工具。

编辑器组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

创建编辑器

1. 使用TelerikEditor标记将组件添加到剃须刀页面。
2. 结合其价值到字符串字段，你想获取HTML内容。

@*这个示例模拟了从数据源加载一些内容，并让编辑器在视图模型中修改它*@  @code{string TheEditorValue {get;设置;Blazor编辑器允许您的用户以一种熟悉的、用户友好的方式编辑HTML。您的用户不需要理解HTML就可以创建它。小部件在所有主要浏览器上输出相同的HTML，遵循可访问性标准，并为内容操作提供API。功能包括:
 
 
文本格式
 
项目编号列表
 
超链接
 
跨浏览器支持
 
跨浏览器相同的HTML输出
 
能力创建自定义工具，下拉菜单，对话框
 
 ";返回base.OnInitializedAsync ();}}

获取/设置内容

Blazor HTML编辑器与它的内容(值)交互，就像所有标准组件一样——通过它的价值参数。您可以使用它来获取和设置编辑器将使用的HTML字符串。阅读更多关于值绑定和数据绑定的信息…

应用程序在将内容传递给编辑器之前必须对其进行消毒，并且在从编辑器获得内容后将其保存到其存储中(可选)之前也必须对其进行消毒。由应用程序来确保没有恶意内容(如输入消毒、XSS攻击预防和其他安全问题)。

验证

您可以使用标准的Data Annotation属性来验证编辑器的内容。由于上面列出的性能原因，验证与DebounceDelay延迟，不是每次击键都立即进行，就像更简单的输入一样。有关如何验证编辑器内容的示例，请参阅验证文章…

大内容支持

编辑器中的内容可以变得非常大。例如，用户可能粘贴了整个文档，或者粘贴的内容包含将被转换为文档的图像base64这是相当大的代表。对于服务器端Blazor应用程序，大内容可能导致SignalR连接中断，因为内容可能超过其限制。为了满足这种情况，您可能需要增加包限制。你可以用类似这样的一行代码来实现:

c#

万博体育手机版网址services.AddServerSideBlazor()。AddHubOptions(o => {o. maximumreceivemessagesize = 4 * 1024 * 1024;// 4mb});

调整

编辑器允许你调整大小:

表

编辑器内容区域中的表及其列和行可以调整大小。若要获取调整大小手柄，请将鼠标悬停在列或行边界上。

图片

编辑器内容区域中的图像可以调整大小。若要抓取调整大小手柄，请将鼠标悬停在图像的边界上。

依赖关系

Blazor Editor的Telerik UI使用prosemmirror引擎，它依赖于prosemmirror引擎。您不需要自己添加任何额外的资产或推荐信，不过，我们已经在内部处理好了一切。

编辑器参数

下表列出了编辑器参数，这些参数在组件文档的其他地方没有讨论。

编辑参考和方法

您可以使用组件引用来调用itsExecuteAsync方法，特别是在创建时自定义工具．此方法允许您以编程方式调用编辑器的工具和命令(例如Bold too、Back Color工具或插入HTML)。

中可以找到可用命令及其各自参数的引用内置工具列表部分的文档。

这段代码演示了如何在光标位置插入水平规则(
标记)。您可以替换字符串与任何其他内容，您可以生成/获取根据您的应用程序需要*@ @使用telerik.com blazor.components.editor insert hr  @code{TelerikEditor TheEditor {get;设置;} string内容{get;设置;} = "
Lorem ipsum. "
Dolor sit amet.
";async Task InsertHr(){等待编辑器。ExecuteAsync（new HtmlCommandArgs("insertHtml", "
")); } }

下一个步骤

• 探索内置工具和命令
• 创建自定义工具
• 探索编辑器编辑模式
• 进出口数据
• 了解关于编辑器事件的更多信息

另请参阅

• 现场演示:编辑器
• API参考