【一】react-draft-wysiwyg富文本使用

1.安装

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

2.引用

import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import { EditorState, ContentState } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';

3.使用

    const textEditor = (
      <Editor
        editorState={editorState}
        toolbarClassName="home-toolbar"
        wrapperClassName="home-wrapper"
        editorClassName="home-editor"
        onEditorStateChange={this.onEditorStateChange}
        toolbar={{
          history: { inDropdown: true },
          inline: { inDropdown: false },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          image: {
            urlEnabled: false,
            uploadEnabled: true,
            alignmentEnabled: true,   // 是否显示排列按钮 相当于text-align
            uploadCallback: this.imageUploadCallBack,
            previewImage: true,
            inputAccept: 'image/*',
            alt: {present: false, mandatory: false}
          }
        }}
        onContentStateChange={this.onEditorContentChange}
        placeholder="请输文章内容"
        spellCheck
        localization={{ locale: 'zh', translations: { 'generic.add': '添加' } }}
      />

    );

下个文章主要记录下toorbar 上传图片本地预览的问题