(draft.js 포함)은 클래스 이름을 사용하여 사용자 정의 블록 스팬을 만들 수 있습니다.

Question

draft.js를 사용하고 있으며 한 가지를 제외하고는 모든 작업이 필요합니다.

편집기에서 선택한 콘텐츠 주변에 맞춤 클래스 (예 : 콘텐츠)가있는 기간을 적용 할 맞춤 블록 옵션을 추가하고 싶습니다.

draft-js 사용자 정의 블록에서 가능합니까?

좋은 예가 있습니까? (검색 할 때 아무 것도 찾지 못했습니다)

Answer 1

사용자 정의 클래스가있는 요소에 텍스트를 줄 바꿈없이 처리 할 수 ​​있습니다. 선택한 텍스트의 스타일을 RichUtils.toggleInlineStyle으로 지정할 수 있습니다. 자세한 내용은 here에 설명되어 있습니다. 이 작업 예제를보십시오 - https://jsfiddle.net/x2gsp6ju/2/

customStyleMap 개체를 정의하십시오. 이 객체의 키는 사용자 정의 스타일 및 값의 고유 한 이름 (적절한 스타일을 가진 객체)이어야합니다.

const customStyleMap = { 
    redBackground: { 
    backgroundColor: 'red' 
    }, 
    underlined: { 
    textDecoration: 'underline', 
    fontSize: 26 
    }, 
}; 

패스 Editor 구성 요소의 customStyleMap 재산이 객체 :이 예에서

<Editor 
    placeholder="Type away :)" 
    editorState={this.state.editorState} 
    onChange={this._handleChange} 
    customStyleMap={customStyleMap} 
/> 

, 나는 내가 this.applyCustomSTyles 메서드를 호출하고 같은 스타일 이름을 전달, 적절한 버튼을 클릭 한 후 선택한 텍스트에 대한 스타일을 적용 첫 번째 인수. 이 방법에서 나는 editorStateRichUtils.toggleInlineStyles 새로운 생성 :

applyCustomStyles = (nameOfCustomStyle) => { 
    this._handleChange(
    RichUtils.toggleInlineStyle(
     this.state.editorState, 
     nameOfCustomStyle 
    ) 
); 
}