React.js組件中使用invokeElement的Medium.js

我在React.js中製作了一個簡單的MediumEditor組件。我將該組件放在Medium.js頁面的invoke demo上。我的問題是我對invokeElement的調用影響了我的可編輯元素的全部內容而不是選擇內容。文檔頁面上的示例在調用invokeElement之前調用了medium.select（）。這是我的版本：React.js組件中使用invokeElement的Medium.js

componentDidMount: function() { 
    var editor = this.refs.editor.getDOMNode(); 
    var medium = new Medium({ 
    element: editor, 
    mode: Medium.richMode, 
    attributes: null, 
    tags: null, 
    pastAsText: false 
    }); 

    this.editor = editor; 
    this.medium = medium; 
    this.refs.editor.getDOMNode().focus(); 
}, 

highlight: function() { 
    if(document.activeElement !== this.editor) { 
    this.medium.select(); 
    } 
}, 

setMode: function(mode) { 
    this.highlight(); 
    if(mode == 'bold') { 
    this.medium.invokeElement('b', { 
     title: "I'm bold!", 
     style: "color: #66d9ef" 
    }); 
    } else if(mode == 'underline') { 
    this.medium.invokeElement('u', { 
     title: "I'm underlined!", 
     style: "color: #a6e22e" 
    }); 
    } else if(mode == 'italic') { 
    this.medium.invokeElement('i', { 
     title: "I'm italics!", 
     style: "color: #f92672" 
    }); 
    } 
},

然後我將setMode附加到我的每個樣式按鈕（粗體，斜體，下劃線）。當我使用上面的代碼時，所有可編輯元素的內容都被改變，而不僅僅是選擇內容。當我查看medium.js的源代碼時，我發現select（）確實全選，所以這看起來好像不應該在爲所選內容調用invokeElement之前調用它。當我刪除突出顯示電話沒有任何反應...

這似乎是一個奇怪的設置和文檔沒有解釋任何這從我能找到。在所選內容上調用元素的正確方法是什麼？任何與使用React.js的medium.js有關的信息也都會受到讚賞。

來源

2014-12-04 Jon Rose

呼叫

this.medium.focus();

調用invokeElement之前。

來自Medium.js的Jake可能決定在沒有選擇任何內容時選擇所有文本，以便網站上的人員可以在不做出選擇的情況下查看工作行爲。

if(document.activeElement !== this.editor) { 
    this.medium.select(); 
}

來源

2015-01-17 00:34:18 mdupls

React.js組件中使用invokeElement的Medium.js

回答

相關問題