7.Draftjs 学习笔记-StateToHtml

来源：互联网发布：mac怎么用u盘重装系统编辑：程序博客网时间：2024/05/01 18:13

扯点废话，我们使用draftjs来进行文本编辑是很不错的，但是如果只是单纯的显示的时候，用draftjs设置只读也是可以的，总有点杀鸡用牛刀的感觉。这时候可以把state转成html，应用场景比如在pc端后台管理，想在手机端显示就比较实用了。

介绍这个工具https://github.com/sstur/draft-js-export-html，用法直接看文档就行。

就我使用的情况总结几点：
当只使用draft内置的样式的时候可以完美转换，当使用了上节所提到的自定义样式，内联和块级的时候，就可以要使用一些options，有点不知道该不该吐槽，Editor配置项中的内联样式之类的和渲染函数都不能直接用，都得改写下，因为stateToHTML 的使用的值有两个属性，style和attributes，style直接写样式就好了，attributes用来使用class，那就重新写个css文件专门给转换后的html使用了。
以上篇的为例，我们想把样式加入转换后的HTML可以如下，这样省的添加外部css文件。

let options = {                inlineStyles: {                    CODE: {                        style: {                            backgroundColor: 'rgba(0, 0, 0, 0.05)',                            fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',                            fontSize: 16,                            padding: 2,                        }                    },                    '36px': {                        style: {                            fontSize: 36                        }                    },                },                blockStyleFn: (block) => {                    switch (block.getType()) {                        case 'blockquote':                            return {                                style: {                                    'border-left': '5px solid #eee',                                    color: '#666',                                    'font-family': "'Hoefler Text', 'Georgia', serif",                                    'font-style': 'italic',                                    'margin': '16px 0',                                    'padding': '10px 20px'                                }                            };                        case 'left':                            return { style: { 'text-align': 'left' } };                        case 'center':                            return { style: { 'text-align': 'center' } };                        case 'right':                            return { style: { 'text-align': 'right' } };                        case 'suibian':                            return { style: { color: 'indianred' } };                        default: return null;                    }                },            };            let html = stateToHTML(content, options);

可以根据实际情况来选择是外部样式文件配置attributes class或者直接像这样配置style

0 0