react-quill-antd

the Quill rich text editor in antd.

Instruction

just test, There are a lot of bugs. Welcome you to fix them.

SnapShot

Development

just run npm run start

Build

Usage

Install

$ npm i react-quill-antd -S

1. Used without antd form

import React from 'react';
import Editor from 'react-quill-antd';
import 'react-quill-antd/dist/index.css';
 
export default class Test extends React.Component {
  state = {
    content: '',
  }
  handleChange = content => {
    this.setState({ content });
  }
  render() {
    return (
      <div>
        <Editor
          value={this.state.content}
          onChange={this.handleChange}
          placeholder="please input ..."
        />
      </div>
    )
  }
}
 

2. Used with antd Form

online Codesandbox

import Editor from 'react-quill-antd';
import 'react-quill-antd/dist/index.css';
 
class EditorForm extends React.Component {
  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }
 
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };
 
  render() {
    const { getFieldDecorator } = this.props.form;
 
    return (
      <Form layout="inline" onSubmit={this.handleSubmit}>
        <FormItem>
          {getFieldDecorator("content", {
            initialValue: "<p>Hello World</p>"
          })(<Editor />)}
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </FormItem>
      </Form>
    );
  }
}