https://github.com/bang88/hake-draft

A wrapper Component for react-draft-wysiwyg
https://github.com/bang88/hake-draft

Last synced: 2 months ago
JSON representation

A wrapper Component for react-draft-wysiwyg

• Host: GitHub
• URL: https://github.com/bang88/hake-draft
• Owner: BANG88
• License: mit
• Created: 2017-03-16T02:08:27.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-22T08:37:46.000Z (almost 8 years ago)
• Last Synced: 2024-09-17T23:52:58.084Z (4 months ago)
• Language: TypeScript
• Size: 35.2 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hake-draft

> A wrapper Component for react-draft-wysiwyg

![banner](assets/preview.png)

This package require a css file, make sure you use webpack or similar tools for handler this file type. 

## Table of Contents

- [Install](#install)

- [Usage](#usage)

- [Contribute](#contribute)

- [License](#license)

## Install

```sh

npm i hake-draft -S

# or

yarn add hake-draft

```

## Usage

```ts

import Draft, { htmlToDraft, draftToHtml, EmptyState, } from 'hake-draft'

state = {

    editorState: htmlToDraft('Your html contents') // or use an EmptyState

}

 { this.setState({ editorState }) }}

/>

// save html to server

const html = draftToHtml(content)

```

If you use antd's Form Component and you are ready to go.

```js

    {getFieldDecorator('Content', {

        rules: [{ required: true, message: 'Please leave a message...' }],

    })(

         { this.setState({ editorState }) }}

        />

        )}

// convert state to html 

this.props.form.validateFields((err, data) => {

    if (err) {

        return

    }

    /**

    * do more check here.

    */

    if (data.Content) {

        data.Content = draftToHtml(data.Content)

    }

    // Now you have your html contents and ready to post to your server.

})

```

## Contribute

Small note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.

## License

MIT © bang88