Skip to content
Library for converting Draftjs editor content state to HTML
JavaScript
Branch: master
Clone or download
Latest commit afe560a May 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
interfaces
js Merge pull request #26 from houfio/patch-1 May 13, 2018
lib New upgrade and release May 13, 2018
.babelrc chore: upgrade deps, migrate to rollup Jan 9, 2018
.eslintignore initial commit Jul 5, 2016
.eslintrc chore: clean eslint config Jan 9, 2018
.flowconfig initial commit Jul 5, 2016
.gitignore adding lib to git ignore Dec 6, 2016
.npmignore upgrading Aug 21, 2016
LICENSE
package.json New upgrade and release May 13, 2018
readme.md Fix readme Apr 23, 2018
rollup.config.js Rollup config changes May 13, 2018
yalc.lock Rollup config changes May 13, 2018
yarn.lock

readme.md

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(
  rawContentState, 
  hashtagConfig, 
  directional, 
  customEntityTransform
);

The function parameters are:

  1. contentState: Its instance of RawDraftContentState

  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.

    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.

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 <br>
    • replace < with &lt;
    • replace > with &gt;
  2. Converts ordered and unordered list blocks with depths to nested structure of <ul>, <ol> and <li>.

  3. Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: <strong>, <em>, <ins>, <code>, <sup>, <sub>.

  4. 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 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: <a href="url" target="_self">text</a>. 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: <a href="url" class="wysiwyg-mention" data-mention data-value="value">text</a>.

  7. 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"/>.

  8. Converts embedded links to iFrames, using width, height and src from entity data. <iframe width="width" height="height" src="src" frameBorder="0"></iframe>

  9. Converts hashtags to anchor tag: <a href="#tag" class="wysiwyg-hashtag">#tag</a>.

  10. 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.
  11. Adding style property to block tag for block level styles like text-align: <p style="text-align: right">text</p>.

  12. RTL, if directional function parameter is true, generated blocks have property dir = "auto" thus they get aligned according to bidi algorithm.

License

MIT.

You can’t perform that action at this time.