如何使用Mobiledoc-kit重现 medium.com 编辑器的“嵌入媒体”按钮

How to reproduce medium.com editor's "embed media" button with Mobiledoc-kit?

本文关键字：媒体 嵌入媒体 按钮 Mobiledoc-kit 何使用 重现 medium 编辑器 com      更新时间：2023-09-26

我们正在构建一个编辑器，并决定使用Mobiledoc-kit来克服contentEditable的限制。

由于我们非常非常喜欢编辑器 medium.com 简单性，我们正在尝试重现其"插入媒体"功能，即"仅允许在空行上插入媒体"，这大致转换为默认的空白部分在 mobiledoc-kit 场景中。这样，行为由两个事件组成：

  • 显示按钮/允许在当前行中没有其他内容时插入
  • 隐藏/禁止在相反的情况下插入。

为了实现这一目标，我正在尝试：

  • 观察"回车"按键按下显示按钮
  • 观察部分长度以隐藏/显示按钮
我

仍然没有弄清楚如何检测"输入"按键和我用来检测节长度的方法，postEditor.editor.range.tail.section.length在didUpdatePost和willRender回调中返回以前的节长度。

这是我使用mobiledoc-kit的第一天，任何关于我是否选择正确路径的反馈以及如何继续前进的建议都非常非常感谢。

cursorDidChange钩子（此处为文档）可能是您想要使用的。

您可以观察光标移动并在光标处于空标记部分时做出反应，例如：

editor.cursorDidChange(() => {
  // if the range isn't collapsed (i.e., the user has selected some text),
  // just return
  if (!editor.range.isCollapsed) { return; }
  // head is a mobiledoc-kit position object.
  // range consists of two positions: head and tail.
  // For a collapsed range, head === tail
  let head = editor.range.head;
  // section can be a markup section (contains user-editable text
  // or a card section. All sections have an `isBlank` method
  let section = head.section;
  if (section.isBlank) {
    // the cursor is in a blank section; show the media insertion UI
  }
});
相关文章：