如何使用Mobiledoc-kit重現medium.com編輯器的「嵌入式媒體」按鈕？

Question

我們正在構建編輯器並決定使用Mobiledoc-kit來克服contentEditable限制。

而我們真的很喜歡medium.com編輯器的簡單性，我們試圖重現它的「插入媒體」功能，即「允許媒體只在空行插入」，大致轉換爲默認的空白部分mobiledoc-kit場景。 這樣的行爲包括兩個事件：

• 放映按鈕/允許插入時，有在當前行中沒有其他內容
• 隱藏/禁止插入在相反的情況下。

爲了實現這一目標，我想：

• 觀察 「ENTER」 鍵按鈕可用於顯示按鈕
• 觀察段長度顯示/隱藏按鈕

我仍然沒有弄清楚如何檢測「輸入」按鍵和我用來檢測段長度的方法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), 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 
    } 
});