draft.js 导出html,Package - draftjs-to-html

最新推荐文章于 2024-04-19 00:30:19 发布

闫小旺

最新推荐文章于 2024-04-19 00:30:19 发布

阅读量417

点赞数

文章标签： draft.js 导出html

DraftJS-to-HTML是一个将DraftJS编辑器内容转换为纯HTML的库。支持多种转换，包括标题、列表、引用、代码块等，并能处理自定义实体和样式。它还提供了处理hashtag的配置选项，以及根据文本方向调整排版的功能。

摘要由CSDN通过智能技术生成

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:

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

header-one

header-two

header-three

header-four

header-five

header-six

unordered-list-item

ordered-list-item

blockquote

code

pre

unstyled

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 >

Converts ordered and unordered list blocks with depths to nested structure of

and
.
Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: , , , , ^{, _.}
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).
Converts entity range of type link to anchor tag using entity data url for href, targetOption for target: text. 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: text.
Converts atomic entity image to image tag using entity data src for image source, and if present alt, alignment, height, width also: .
Converts embedded links to iFrames, using width, height and src from entity data.
Converts hashtags to anchor tag: #tag.
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:
text
.
RTL, if directional function parameter is true, generated blocks have property dir = "auto" thus they get aligned according to bidi algorithm.
License
MIT.
Current Tags
0.9.1
...
latest
(2 years ago)
55 Versions
0.9.1
...
2 years ago
0.9.0
...
2 years ago
0.8.4
...
3 years ago
0.8.3
...
3 years ago
0.8.2
...
3 years ago
0.8.1
...
4 years ago
0.8.0
...
4 years ago
0.7.6
...
4 years ago
0.7.5
...
4 years ago
0.7.4
...
4 years ago
0.7.3
...
4 years ago
0.7.2
...
4 years ago
0.7.1
...
4 years ago
0.7.0
...
4 years ago
0.6.3
...
4 years ago
0.6.2
...
4 years ago
0.6.1
...
4 years ago
0.6.0
...
4 years ago
0.5.1
...
4 years ago
0.5.0
...
4 years ago
0.4.5
...
4 years ago
0.4.4
...
4 years ago
0.4.3
...
4 years ago
0.4.2
...
5 years ago
0.4.1
...
5 years ago
0.4.0
...
5 years ago
0.3.9
...
5 years ago
0.3.8
...
5 years ago
0.3.7
...
5 years ago
0.3.6
...
5 years ago
0.3.5
...
5 years ago
0.3.4
...
5 years ago
0.3.3
...
5 years ago
0.3.2
...
5 years ago
0.3.1
...
5 years ago
0.3.0
...
5 years ago
0.2.8
...
5 years ago
0.2.7
...
5 years ago
0.2.6
...
5 years ago
0.2.5
...
5 years ago
0.2.4
...
5 years ago
0.2.3
...
5 years ago
0.2.2
...
5 years ago
0.2.1
...
5 years ago
0.2.0
...
5 years ago
0.1.9
...
5 years ago
0.1.8
...
5 years ago
0.1.7
...
5 years ago
0.1.6
...
5 years ago
0.1.5
...
5 years ago
0.1.4
...
5 years ago
0.1.3
...
5 years ago
0.1.2
...
5 years ago
0.1.1
...
5 years ago
0.1.0
...
5 years ago

闫小旺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
draft.js 导出html,Package - draftjs-to-html

DraftJS TO HTMLA 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 f...
复制链接

扫一扫