Question

我在React.js中创建一个简单的MediumEditor组件。我将组件基于Medium.js页面上的invoke demo。我的问题是我对invokeElement的调用影响了我的可编辑元素的整个内容而不是选择内容。 docs页面上的示例在调用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（）确实选择了all，所以这似乎不应该在为所选内容调用invokeElement之前调用它。当我删除突出显示时，没有任何反应......

这看起来像一个奇怪的设置，文档没有从我能找到的内容中解释任何这些。在所选内容上调用元素的正确方法是什么？任何与使用带有React.js的medium.js相关的信息都会受到赞赏。

Answer 1

呼叫

this.medium.focus();

在调用invokeElement之前。

来自Medium.js的Jake可能决定在没有选择任何内容时选择所有文本，这样网站上的人就可以看到工作行为而无需进行选择。

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

使用invokeElement在React.js组件中的Medium.js

1 个答案: