介绍

挑战性

仔细看看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

HtmlEditor在Blazor中编写相关推荐

interop_如何在Blazor中实现JavaScript Interop
interop 介绍 (Introduction) In this article, we will learn about JavaScript Interop in Blazor. We will ...
在Blazor中构建数据库应用程序——第1部分——项目结构和框架
目录介绍存储库和数据库设计理念数据 UI 解决方案结构界面结构页面路由视图布局表单控件 Blazor.Database项目 Program.cs ServiceCollection ...
了解和使用DotNetCore和Blazor中的异步编程
目录介绍您对异步编程了解什么? 那么,什么是异步编程? 我们什么时候应该使用它? 任务.线程.计划.上下文到底是怎么回事? Asnyc编码模式命名约定异步任务模式任务模式事件模式阻塞与 ...
在Rust代码中编写Python是种怎样的体验？
作者 | Mara Bos,Rust资深工程师译者 | Arvin,编辑 | 屠敏来源 | CSDN(ID:CSDNnews) 大约一年前,我发布了一个名为inline-python(https: ...
R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象
R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象目录 R语言data.table导入数据实战:data.table中编写函数并使用SD数据对象 #data.t ...
linux命令行运行c程序,如何在Linux中编写和运行C程序
Linux正在成为开发人员的编程天堂,成为开源和免费操作系统. Turbo C编译器已经是一种编译程序的旧方法,所以让程序员转向Linux以获得新的编程环境. 在本文中,我们将解释如何编写,编译和运行 ...
【未完成】[Spark SQL_2] 在 IDEA 中编写 Spark SQL 程序
0. 说明在 IDEA 中编写 Spark SQL 程序,分别编写 Java 程序 & Scala 程序 1. 编写 Java 程序待补充 2. 编写 Scala 程序待补充转载于:h ...
Linux 多线程应用中编写安全的信号处理函数
2019独角兽企业重金招聘Python工程师标准>>> Linux 多线程应用中编写安全的信号处理函数在开发多线程应用时,开发人员一般都会考虑线程安全,会使用 pthread_m ...
java代码如何与界面联系在一起_如何在Visual Studio Code 中编写Java代码
本文将展示如何在Visual Studio Code中用Java编写和运行一个简单的Hello World程序. 首先您必须在本地开发环境中安装Java SE开发工具包(JDK) Visual Stu ...

HtmlEditor在Blazor中编写

介绍

挑战性

仔细看看HtmlEditableContent

使用代码

现在怎么办

安装

HtmlEditor在Blazor中编写相关推荐

最新文章

热门文章