https://github.com/jpuri/html-to-draftjs

https://github.com/jpuri/html-to-draftjs

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jpuri/html-to-draftjs
• Owner: jpuri
• License: mit
• Created: 2016-12-16T18:16:51.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-10T23:30:57.000Z (over 1 year ago)
• Last Synced: 2024-04-06T14:44:36.842Z (3 months ago)
• Language: HTML
• Size: 4.3 MB
• Stars: 159
• Watchers: 4
• Forks: 131
• Open Issues: 75
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-draft-js - HTML to DraftJS - Convert plain HTML to DraftJS Editor content. (Common Utilities)
• awesome-draft-js - HTML to DraftJS - Convert plain HTML to DraftJS Editor content. (Common Utilities)

README

        
# HTML To DraftJS

A library for converting plain HTML to DraftJS Editor content.

Build for use with **[react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)**.

## Installation

```

npm install html-to-draftjs --save

```

## Usage

```

import { EditorState, ContentState } from 'draft-js';

import htmlToDraft from 'html-to-draftjs';

const blocksFromHtml = htmlToDraft(this.props.content);

const { contentBlocks, entityMap } = blocksFromHtml;

const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);

const editorState = EditorState.createWithContent(contentState);

```

### (optional) customChunkRenderer

Use to define additional html nodes. Only supports atomic blocks.

* _nodeName: string_ - the name of the node, in lowercase

* _node: HTMLElement_ - the parsed node itself

This renderer function is executed before any other html to draft conversion.

Return nothing (or something falsy) to continue with the normal translation.

Example:

```

htmlToDraft('
', (nodeName, node) => {

  if (nodeName === 'hr') {

    return {

      type: 'HORIZONTAL_RULE',

      mutability: 'MUTABLE',

      data: {}

    };

  }

})

```


**Take Care:** Plz not use version `1.2.0` it has build issues.