使用指南

安装依赖

npm install react-draft-wysiwyg
npm install draft-js
npm install draftjs-to-html
npm install html-to-draftjs

使用组件

<Editor
  editorState={editorState}
  readOnly={readOnly}
  toolbar={{
    options:[
        'inline',
        'blockType',
        'fontSize',
        'fontFamily',
        'list',
        'textAlign',
        'colorPicker',
        'image',
        'link',
        'remove',
        'history',
    ],
  }}
  mention={mentionWithDefault}
  toolbarClassName="toolbarClassName"
  wrapperClassName="rtEditor__wrapper"
  editorClassName="editorClassName"
  localization={{ locale: 'zh' }}
  onEditorStateChange={onEditorStateChange}
/>

遇到的问题

往编辑器复黏贴带图片的内容时报错

<Editor 
	/** 允许粘贴图片 */
	handlePastedText={() => false}
/>

编辑器中文本居右，且无输入内容情况下光标未展示

.rdw-right-aligned-block > div {
	min-width: 1px;
}

改进后

在编辑器中自定义样式如何使用

<Editor 
	customStyleMap={{
    	BLUE: {
    		color: '#556BF4',
    	},
    }}
/>

let contentState = Modifier.replaceText(
  newEditorState.getCurrentContent(),
  newEditorState.getSelection(),
  `${entry}`,
  /** 设置内联样式 inlineStyle?: DraftInlineStyle */
  ['BLUE'],
  entityKey
);