HtmlEditor在Blazor中编写

目录

介绍

挑战性

仔细看看HtmlEditableContent

使用代码

现在怎么办

安装

---

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

• 下载源代码321.3 KB

介绍

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

该HTMLEditableContent项目是Blazor组件，带有一个ContentEditable div。它要求HtmlBuilder在contentEditable div中渲染HTML 。

BlazorHtmlEditor是围绕HtmlEditableContent构建的Blazor组件。UI外壳使用MatBlazor（Blazor的Material 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会将任何光标位置更改都视为参数更改，包括渲染。你根本不想要那个。

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

仔细看看HtmlEditableContent

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

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

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

使用代码

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

该代码非常易于使用。

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

在BlockStyling参数中，传递类似H1和H2的样式。还有通过Colors和FontStyling的可能性。HtmlEditors使用默认设置，如果你不为他们提供设置。

现在怎么办

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

安装

解压缩该zip文件。执行：

dotnet restore

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

npm install

运行：

npm run build:debug