A library for converting DraftJS ContentBlock 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.
npm install draftjs-to-html
import draftToHtml from 'draftjs-to-html';
const contentState = editorState.getCurrentContent();
const markup = draftToHtml(contentState);
Following is the list of conversions it supports:
- 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 | unstyled | p |
It performs these additional changes to text of blocks:
- replace blank space in beginning and end of block with
- replace \n
with <br>\n
- replace <
with <
- replace >
with >
-
Converts ordered and unordered list blocks with depths to nested structure of
<ul>, <ol>
and<li>
. -
Converts inline styles BOLD, ITALIC, UNDERLINE to corresponding HTML tags:
<strong>, <em>, <ins>
. -
Converts inline styles color, fontsize to a span tag with inline style details:
<span style="color:xyz;font-size:xx">
. The inline styles should start with stringscolor
orfont-size
likecolor-red
,color-green
orfontsize-12
,fontsize-20
. -
Converts entity range of type link to anchor tag using entity data url for href:
<a href="url" />
. -
Converts atomic entity image to image tag using entity data src for image source:
<img src="src" />
.
MIT.