我们正在构建一个编辑器,并决定使用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
}
});