javascript - React.js 组件中的 Medium.js 使用 invokeElement

Question

我正在 React.js 中制作一个简单的 MediumEditor 组件。我将该组件基于 invoke demo来自 Medium.js 页面。我的问题是，我对 invokeElement 的调用影响了可编辑元素的整个内容，而不是选择内容。文档页面上的示例在调用invokeElement 之前调用了medium.select()。这是我的版本:

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 之前调用它。当我删除突出显示调用时，什么也没有发生...

这似乎是一个奇怪的设置，并且文档没有从我所能找到的内容中解释任何内容。对所选内容调用Element 的正确方法是什么？任何与将medium.js 与React.js 一起使用相关的信息也值得赞赏。

Answer 1

通话

this.medium.focus();

在调用invokeElement之前。

Medium.js 的 Jake 可能决定在未选择任何内容时选择所有文本，以便网站上的人员无需进行选择即可看到工作行为。

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