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

回答

相关问题