InvokeElement를 사용하는 React.js 구성 요소의 Medium.j

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()가 모두 선택되어 있으므로 invokeElement가 선택된 내용에 대해 호출되기 전에 호출되어서는 안됩니다. 강조 표시를 제거하면 아무 일도 일어나지 않습니다 ...

이것은 이상한 설정처럼 보이며 문서에서 찾을 수있는 것 중 하나를 설명하지 않습니다. 선택한 내용에서 invokeElement가 올바른 방법은 무엇입니까? React.js와 함께 media.js를 사용하는 것과 관련된 모든 정보도 감사했습니다.

Answer 1

invokeElement를 호출하기 전에 전화

this.medium.focus(); 

.

Medium.js의 Jake는 아무 것도 선택되지 않은 경우 모든 텍스트를 선택하여 사이트의 사람들이 선택하지 않고 작업 동작을 볼 수 있도록하기로했습니다.

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