我们正在构建一个编辑器,并决定使用Mobiledoc-kit来克服contentEditable限制。
正如我们真的非常喜欢medium.com编辑器的简单性,我们正在尝试重现其“插入媒体”功能,即“仅允许媒体插入空行”大致转换为默认情况下的空白部分mobiledoc-kit场景。这种行为包括两个事件:
为了达到这个目的,我试图:
我仍然没有弄清楚如何检测“输入”按键和我用来检测段长度的方法postEditor.editor.range.tail.section.length
返回didUpdatePost
和willRender
回调中的前一段长度。
这是我使用mobiledoc-kit的第一天,以及关于我是否选择了正确路径的任何反馈以及如何继续进行的建议都非常非常感谢。
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
}
});