HtmlEditor在Blazor中编写

目录

介绍

挑战性

仔细看看HtmlEditableContent

使用代码

现在怎么办

安装


尽管可以在Blazor项目中使用HTML编辑器,如TinyMC(通过包装JavaScript代码),但建议改用本地的Blazor组件。该代码旨在显示如何在Blazor中实现HTML编辑器。主要目标是研究这些挑战,而不是创建在每个浏览器中都经过测试的功能强大的编辑器。

介绍

步骤如下:项目HTMBuilder是具有核心编辑器功能的类库。那是纯净的.NET,没有UI,带有附带的测试项目。

HTMLEditableContent项目是Blazor组件,带有一个ContentEditable div。它要求HtmlBuildercontentEditable div中渲染HTML 

BlazorHtmlEditor是围绕HtmlEditableContent构建的Blazor组件。UI外壳使用MatBlazorBlazorMaterial Design)进行编程。

选择该设计是因为您可以用自己的组件替换每个组件。如果您不希望使用Material Design编辑器,则可以构建自己的UI Shell。如果只需要逻辑,则HTMLBuilder足够了。

该代码完全基于AngleSharp。展示HTML文档的.NET库。

挑战性

最大的挑战是Blazor绑定与ContentEditable HTML元素的结合。首先,我使用绑定。AngleSharp生成的HTML通过MarkUpString绑定到HTML元素。

问题是浏览器以类似MutationObserver的方式在contenteditable元素中实现更改。Blazor通过绑定更新了HTML后,浏览器会看到该元素已更改,然后也开始工作。解决该问题的唯一方法不是使用Blazor绑定,而是通过Interop通过JavaScript更新HTML元素。

另一个问题是Editor Blazor组件和HtmlEditableContent Blazor组件必须相互通信。例如,编辑器要显示光标位置的变化。如果通过参数绑定实现此链接,Blazor会将任何光标位置更改都视为参数更改,包括渲染。你根本不想要那个。

这是通过在EditorHtmlEditableContent组件之间放置一个共享类来解决的。编辑器在static dictionary中中注册一个编辑器接口,EditableContent在另一个Htmlbuilder interface中注册一个static dictionarydictionary将两个组件之间被共享。无论是EditorContent组件具有ID属性(Guid),并且它是共享的(通过参数)。因为它们具有相同的键,所以它们可以在共享库中请求彼此的接口,而不会进行任何渲染。这不是理想的方法,但是可以。

仔细看看HtmlEditableContent

如果用户在浏览器中更改光标或选择,则这些位置更改将通过JavaScript传递给Blazor组件。内容更改不会立即传达。

如果.NET端必须执行操作,它将向浏览器询问位置和内容(innerHTML)。然后,AngleSharp解析文档并执行操作。结果是新的HTML内容。通过JavaScript,将旧内容替换为新内容,并恢复光标选择位置。

此设置限制了JavaScriptBlazor端之间的交互次数。位置变动是个例外。

使用代码

警告:所有项目都是实验性的。目的只是演示如何在Blazor中构建一个HtmlEditor。例如,我没有花时间完全熟悉AngleSharp,也没有花时间编写功能齐全的HTML编辑器。另外,我也没有在所有浏览器中测试所有内容。这需要更多时间。我主要关心的是构建Blazor HTML编辑器时遇到的挑战。

该代码非常易于使用。

//
<BlazorHtmlEditor.HtmlEditor BlockStylings="@BlockStylings"></BlazorHtmlEditor.HtmlEditor>
//

BlockStyling参数中,传递类似H1H2的样式。还有通过ColorsFontStyling的可能性。HtmlEditors使用默认设置,如果你不为他们提供设置。

现在怎么办

学习代码,自己玩,改进和扩展,提出建议,改善UI等。尽管遇到了种种困难,但与Blazor合作仍然是一种荣幸。

安装

解压缩该zip文件。执行:

dotnet restore

将活动目录更改为HtmlEditablContent。运行:

npm install

运行:

npm run build:debug

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值