This is a module for DraftJS that will export your editor content to semantic HTML.
It was extracted from React-RTE and placed into a separate module for more general use. Hopefully it can be helpful in your projects.
npm install --save draft-js-export-html
import {stateToHTML} from 'draft-js-export-html';
let html = stateToHTML(contentState);You can optionally pass a second "options" argument to stateToHTML which should be an object with one or more of the following properties:
You can define rendering options for inline styles. This applies to built-in inline styles (e.g. BOLD) or your own custom inline styles (e.g. RED). You can specify which element/tag name will be used (e.g. use <b> instead of <strong> for BOLD). You can add custom attributes (e.g. class="foo") or add some styling (e.g. color: red).
Example:
let options = {
inlineStyles: {
// Override default element (`strong`).
BOLD: {element: 'b'},
ITALIC: {
// Add custom attributes. You can also use React-style `className`.
attributes: {class: 'foo'},
// Use camel-case. Units (`px`) will be added where necessary.
style: {fontSize: 12}
},
// Use a custom inline style. Default element is `span`.
RED: {style: {color: '#900'}},
},
};
let html = stateToHTML(contentState, options);You can define a custom renderer for any block type. Pass a function that accepts block as an argument. You can return a string to render this block yourself, or return nothing (null or undefined) to defer to the default renderer.
Example:
let options = {
blockRenderers: {
atomic: (block) => {
let data = block.getData();
if (data.get('foo') === 'bar') {
return '<div>' + escape(block.getText()) + '</div>';
}
},
},
};
let html = stateToHTML(contentState, options);You can define custom styles and attributes for your block, utilizing the underlying built-in rendering logic of the tags, but adding your own attributes or styles on top. The blockStyleFn option takes a block and returns an Object similar to inlineStyles of the following signature or null:
{
attributes: {}
style: {}
}Example:
let options = {
blockStyleFn(block) => {
if (block.getData().get('color')) {
return {
style: {
color: block.getData().get('color')
}
}
}
}
}
let html = stateToHTML(contentState, options);If you want to help out, please open an issue to discuss or join us on Slack.
This software is BSD Licensed.