缺少react-draft-wysiwyg的编辑器字段输入

Question

缺少react-draft-wysiwyg编辑框。如何为编辑器输入字段绘制一个框？

​

​

import React, { Component, Fragment } from 'react';
import { EditorState, ContentState, convertToRaw, convertFromHTML } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';

      <Fragment>
        <Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={this.onEditorStateChange}
        />
      </Fragment>

Answer 1

进入'node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css'并添加边框。

.rdw-editor-main {
  height: 250px;
  /* overflow: auto; */
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #F1F1F1;

}

Answer 2

你可以创建css文件并为.rdw-option-wrapper添加边框

​

. wrapperClassName .rdw-option-wrapper {
      min-width: 37px;
      height: 32px;
      border-radius: 2px;
      padding: 5px;
      margin: 0 4px;
    }
  }

​