Blazor - 将 onkeydown 与 TinyMCE 结合使用

Question

有人有关于如何将 OnKeyDown 与 TinyMCE 一起使用的示例吗？我浏览了文档，似乎找不到使用 blazor 的示例

我尝试查看文档，但只找到了非 blazor 示例。我正在使用tiny-MCE NuGet 包。

使用 JS 对象完成的示例 https://www.tiny.cloud/blog/keypress-event/ 在本文中，您可以看到库如何拥有一个传入的对象来“配置”编辑器。

tinymce.init({
  selector: "textarea#editor",
  plugins: "a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount",
  toolbar: "undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellchecker a11ycheck typography code | fullscreen",
  setup: (editor) => { editor.on('keydown', (e) => { } }

但是，使用 Blazor TinyMCE 库，您会传入 C# 字典，并且他们没有提供如何将事件与 Blazor TinyMCE 一起使用的示例。

<Editor
  Conf="@editorConf"
/>

@code {
  private Dictionary<string. object> editorConf = new Dictionary<string, object>{
    {"toolbar", "undo redo | bold italic"},
    {"width", 400}
  };
}

Answer 1

从根本上来说，您的问题是您希望能够从客户端事件调用 Blazor 函数。

幸运的是，Blazor 提供了客户端-服务器和服务器-客户端通信方法。

1.创建 JavaScript 初始值设定项

根据文档：

JavaScript (JS) 初始化器在 Blazor 之前和之后执行逻辑 应用程序加载。 JS 初始化器在以下场景中很有用：

• 自定义 Blazor 应用程序的加载方式。
• 在 Blazor 启动之前初始化库。
• 配置 Blazor 设置。

创建以下文件：

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js

例如，如果您的 Blazor Web 项目名为

MyProject.csproj

，则该文件将名为

MyProject.lib.module.js

。

2.注册自定义事件

您将把组件绑定到自定义事件。内置事件的一个示例是

@onclick

。

在新的 JS 文件中添加代码来注册自定义事件：

export function afterWebStarted(blazor) {
  // give the event a specific name
  blazor.registerCustomEventType('tinymcekeydown', {    
    createEventArgs: function (event) {
      return {
        // TODO: set meaningful args here
        myKey: event.detail.myKey
      };
    }
  });
}

WebAssembly 和 Server 之间的事件注册有所不同，因此请检查文档。

3.为您的自定义事件参数创建 C# 类

public class EventHandlerTinyMceKeyDownEventArgs : EventArgs
{
    // TODO: add meaningful args here to match the JS event

    public string? MyKey { get; set; }
}

4.使用 EventHandler 连接自定义事件

使用以下规则创建一个 C# 类（来自文档）：

• 为了让编译器找到 [EventHandler] 类，必须将其放入 C# 类文件 (.cs) 中，使其成为普通的顶层 类。
• 将班级标记为公开。
• 该课程不需要会员。
• 该类必须称为“EventHandlers”才能被 Razor 编译器找到。
• 将类放置在您的应用程序特定的命名空间下。
• 将命名空间导入到使用事件的 Razor 组件 (.razor) 中。

添加与您的自定义事件对应的事件处理程序属性。

[EventHandler("ontinymcekeydown", typeof(EventHandlerTinyMceKeyDownEventArgs), 
enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

在我的实现中，为了方便起见，我将

EventHandlers

类和我的事件参数类放在同一个文件中，并放在单独的项目中以实现可重用，但显然，只要满足要求，您可以将它们放在任何您想要的地方。

4.绑定事件

您现在可以像任何其他事件一样绑定到自定义事件。

<div id="my-tinymcecontainer" @ontinymcekeydown="@OnKeyDown">

</div>

@code {
  private void OnKeyDown(EventHandlerTinyMceKeyDownEventArgs args)
  {
    // TODO: handle the event
  }
}

5.触发事件

我们已经创建了所有这些样板，但仍然没有任何东西可以触发事件本身。

在上面的示例中，我已将自定义事件绑定到我为本示例而创建的容器。为了处理该容器上的事件，您还需要触发该容器上的事件。

在我的实现中（处理第三方图表库中的钻取事件），我调用 JS 方法从我的 razor 组件构建图表，传入对容器 HTML 元素的引用，然后触发该容器上的事件以完成圆圈。

为了完成这个示例，我将使用 id 获取对容器的引用。在实际代码中，您需要更好的方法。

function handleKeyDown() {
  const el = document.GetElementById('my-tinymcecontainer');
  const event = new CustomEvent('tinymcekeydown', {
    detail: {
        key: 'Hello, World!'
    }
  });
  el.dispatchEvent(event);  
}

完整文档：

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-8.0#custom-event-arguments