CODEWITHSUNDEEP
javascriptreactjsreact-draft-wysiwyg
phongyewtong
phongyewtong

Reputation: 5319

react-draft-wysiwyg has editor field input is missing

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>

Upvotes: 3

Views: 1877

Answers (2)

Tony Nguyen
Tony Nguyen

Reputation: 3488

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;
    }
  }

Upvotes: 1

phongyewtong
phongyewtong

Reputation: 5319

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;

}

Upvotes: 1

Related Questions