Question

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

而且我们真的非常喜欢medium.com编辑器的简单性，我们正在尝试重现其插入媒体＆＃34;功能，即允许媒体仅插入空行＆＃34;默认情况下，mobiledoc-kit场景大致转换为空部分。这种行为包括两个事件：

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

为了实现这一点，我试图：

观察＆＃34;输入＆＃34;按键显示按钮
观察部分长度以隐藏/显示按钮

我仍然没有弄清楚如何检测＆＃34;输入＆＃34;我用来检测段长postEditor.editor.range.tail.section.length的按键和方法会返回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
  }
});

如何重现media.com编辑＆＃34;嵌入媒体＆＃34;用Mobiledoc-kit按钮？

1 个答案: