如何使用 Mobiledoc-kit 重现 medium.com 编辑器的 "embed media" 按钮？

Question

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

而且我们真的非常喜欢 medium.com 编辑器的简单性，我们正在尝试重现它的 "insert media" 功能，这就是 "to allow media insertion only on the empty lines" 默认情况下粗略转换为空白部分的 mobiledoc -套件场景。这样的行为由两个事件组成：

当当前行没有其他内容时显示button/allow插入
hide/disallow反写插入

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

观察 "enter" 按键显示按钮
观察 hide/show 按钮的部分长度

我仍然没有弄清楚如何检测 "enter" 按键和我用来检测节长度的方法 postEditor.editor.range.tail.section.length returns 前一节长度 didUpdatePost 和 willRender 回调。

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

Answer 1

cursorDidChange 挂钩 (docs here) 可能是您想要使用的。

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

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
  }
});

如何使用 Mobiledoc-kit 重现 medium.com 编辑器的 "embed media" 按钮？

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

javascript

wysiwyg

mobiledoc-kit