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
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(
contentState,
hashtagConfig,
directional,
customEntityTransform
);
The function parameters are:
contentState: Its instance of RawDraftContentState
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.
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.
directional: Boolean, if directional is true text is aligned according to bidi algorithm. This is also optional.
customEntityTransform: Its function to render custom defined entities by user, its also optional.
editorState is instance of DraftJS EditorState.
Supported conversions
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 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<br>
- replace
<
with<
- replace
>
with>
- replace blank space in beginning and end of block with
Converts ordered and unordered list blocks with depths to nested structure of
<ul>, <ol>
and<li>
.Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags:
<strong>, <em>, <ins>, <code>, <sup>, <sub>
.Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details:
<span style="color:xyz;font-size:xx">
. (The inline styles in JSON object 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, target for target:
<a href="url" target="_self">text</a>
. Default target is_self
.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:
<a href="url" class="wysiwyg-mention" data-mention data-value="value">text</a>
.Converts atomic entity image to image tag using entity data src for image source, and if present alt, alignment, height, width also:
<img src="src" alt="alt_text" style="float: left, height: 50px; width: 50px"/>
.Converts embedded links to iFrames, using width, height and src from entity data.
<iframe width="width" height="height" src="src" frameBorder="0"></iframe>
Converts hashtags to anchor tag:
<a href="#tag" class="wysiwyg-hashtag">#tag</a>
.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:entity
( object with { type, mutalibity, data})text
text present in the block.
Adding style property to block tag for block level styles like text-align:
<p style="text-align: right">text</p>
.RTL, if directional function parameter is true, generated blocks have property
dir = "auto"
thus they get aligned according to bidi algorithm.
License
MIT.