Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpuri/draftjs-to-html
Library for converting Draftjs editor content state to HTML
https://github.com/jpuri/draftjs-to-html
Last synced: 9 days ago
JSON representation
Library for converting Draftjs editor content state to HTML
- Host: GitHub
- URL: https://github.com/jpuri/draftjs-to-html
- Owner: jpuri
- License: mit
- Created: 2016-07-05T08:37:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-09T13:33:58.000Z (9 months ago)
- Last Synced: 2024-10-30T07:59:00.918Z (9 days ago)
- Language: JavaScript
- Size: 3.77 MB
- Stars: 320
- Watchers: 7
- Forks: 143
- Open Issues: 62
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-draft-js - DraftJs to HTML - Library for generating HTML for DraftJS editor content. (Common Utilities)
README
# DraftJS TO HTML
A library for converting DraftJS Editor content to plain HTML.
This is draft to HTML library I wrote for one of my projects. I am open-sourcing it so that others can also be benefitted from my work.
## Installation
`npm install draftjs-to-html`
## Usage
```js
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(
rawContentState,
hashtagConfig,
directional,
customEntityTransform
);
```
The function parameters are:
1. **contentState**: Its instance of [RawDraftContentState](https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#content)
2. **hashConfig**: Its configuration object for hashtag, its required only if hashtags are used. If the object is not defined hashtags will be output as simple text in the markdown.
```js
hashConfig = {
trigger: '#',
separator: ' ',
}
```
Here trigger is character that marks starting of hashtag (default '#') and separator is character that separates characters (default ' '). These fields in hastag object are optional.
3. **directional**: Boolean, if directional is true text is aligned according to bidi algorithm. This is also optional.
4. **customEntityTransform**: Its function to render custom defined entities by user, its also optional.
**editorState** is instance of DraftJS [EditorState](https://draftjs.org/docs/api-reference-editor-state.html#content).
## Supported conversions
Following is the list of conversions it supports:
1. Convert block types to corresponding HTML tags:
|| Block Type | HTML Tag |
| -------- | -------- | -------- |
| 1 | header-one | h1 |
| 2 | header-two | h2 |
| 3 | header-three | h3 |
| 4 | header-four | h4 |
| 5 | header-five | h5 |
| 6 | header-six | h6 |
| 7 | unordered-list-item | ul |
| 8 | ordered-list-item | ol |
| 9 | blockquote | blockquote |
| 10 | code | pre |
| 11 | unstyled | p |
It performs these additional changes to text of blocks:
- replace blank space in beginning and end of block with ` `
- replace `\n` with `
`
- replace `<` with `<`
- replace `>` with `>`
2. Converts ordered and unordered list blocks with depths to nested structure of `
- ,
- `.
3. Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: `, , ,
, , `.4. Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details:
``. (The inline styles in JSON object should start with strings `color` or `font-size` like `color-red`, `color-green` or `fontsize-12`, `fontsize-20`).5. Converts entity range of type link to anchor tag using entity data url for href, targetOption for target: `text`. Default target is `_self`.
6. Converts entity range of type mention to anchor tag using entity data url for href and value for data-value, it also adds class to it: `text`.
7. Converts atomic entity image to image tag using entity data src for image source, and if present alt, alignment, height, width also: `
`.
8. Converts embedded links to iFrames, using width, height and src from entity data. ``
9. Converts hashtags to anchor tag: `#tag`.
9. `customEntityTransform` can be used for transformation of a custom entity block to html. If present its call to generate html for entity. It can take 2 parameter:
1. `entity` ( object with { type, mutalibity, data})
2. `text` text present in the block.10. Adding style property to block tag for block level styles like text-align: `
text
`.11. RTL, if directional function parameter is true, generated blocks have property `dir = "auto"` thus they get aligned according to bidi algorithm.
## License
MIT.
- ` and `