react-draft-wysiwyg has editor field input is missing

2
votes

react-draft-wysiwyg has editor box is missing. how do I draw a box for the editor input field?

enter image description here

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>
2
javascriptreactjsreact-draft-wysiwyg
There might be some css problem. You can open devTools to check whether the editor is render or not. - Tony Nguyen
its rendering but the input field box is missing - phongyewtong
editorClassName="editorClassName" is the class for input field, I mean check whether the input field is rendered or not, and check the css attribute. It's better to create a simple demo to reproduce the issue. - Tony Nguyen

2 Answers

1
votes

went into 'node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css' and added border.

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

}
1
votes

You can create css file and add border for .rdw-option-wrapper

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