续 上篇 《draft.js–富文本编辑器框架的实践(一)》
- 安装
- 初始化一个draft编辑器的实例
- 对编辑器进行样式修改
- 增加格式按钮
- 行渲染以及行样式修改
- 默认块以及块样式修改
- 格式以及对应格式按钮之间的高亮联系
- 修改默认块所对应的映射元素以及自定义块的元素渲染
- 插入行元素,如emoji表情
- 插入块元素,如图片或者视频
- 数据存储
- 数据回显
(八)修改默认块所对应的映射元素以及自定义块的元素渲染:
draft.js提供的默认块格式肯定会有满足不了产品经理需求的时候,因此他提供了一个方法来让开发人员定义自己的块格式,渲染任何你想渲染的块标签。这个方法也可以覆盖draft.js的默认块格式。
步骤如下:
- 安装immutable
- 引入immutable
- 使用immutable.Map()方法,添加想要扩展的元素
- 在
<Editor/>
里增加属性blockRenderMap - 格式的修改。
1)安装immutable
npm install --save immutable
2)引入immutable。
//Editor.js
import Immutable from 'immutable';
3)使用immutable.Map()方法,添加想要扩展的元素
假设我想添加一个名为my-section的style。它用<section>
来渲染。
const blockRenderMap = Immutable.Map({
'my-section': {
element: 'section'
},
});
4)在<Editor/>
里增加属性bloc