braft-pure-convert
v0.1.12
Published
A library for braft editor to html conversion. braft编辑器转换为html文档库
Downloads
4
Readme
Braft Pure Convert
A library for converting Braft Editor content(also DraftJs Raw Content) to plain HTML with Braft styles.
No dependencies, easy to under any javascript frameworks, not limited at React.
This project is inspired by draftjs-to-html, I forked it to support braft styles.
Installation
npm install braft-pure-convert
Usage
import braftPureConvert from 'braft-pure-convert';
const rawContentState = this.editorState.getContent();
const markup = draftToHtml({
rawState: rawContentState,
hashtagConfig:
directional: false,
extendAtomicTransform: function (atomic) {}
});
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, targetOption 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.