draft.js开发富文本编辑器
写在前头的话
在react中去寻找一个好用的富文本编辑器网上很少有推荐的,搜到的也只有一些个人不成熟的作品,慢慢发现网上比较推荐的一个东东叫做draft.js。
这个东西在网上可以找到的教程也是手指头可以数到的,但是出来一年多了,使用者比较少的原因主要还是很难用。
1. 它需要你理解一些富文本领域的新的理念。
2. 它不是一个成品,而是一套工具,需要你去花大量的时间用它来开发富文本编辑器,而传统意义上的富文本编辑器都是开箱即用的,一般人很少去做这种事。
说白了就是新学一套类似于webpack一样的系统的知识。
作为facebook力推的一款工具,它的存在就像一股横跨web界的清流。总之react没什么好用的富文本插件,不妨来看看它是一个什么东东吧。
开始使用
安装
npm install draft.js
yarn add daft.js
使用
import React from 'react'; import { Editor,EditorState} from 'draft-js';
class DraftEditor extends React.Component { constructor(props) { super(props); this.state = { editorState: EditorState.createEmpty() }; this.onChange = editorState => { this.setState({ editorState }); }; } render() { let editorState = this.state.editorState; return ( <Editor placeholder={'Write what you would say.'} editorState={editorState} onChange={this.onChange} /> ) } } export default DraftEditor;
完美,这样我们就成功的入门(keng)了,显示出来就是这样子,如果没有那个placeholder, 你会发现整个页面是空的。
excuse me?
我的加粗呢,我的斜体呢,我的下划线呢?对了,这特喵的和就是个textarea嘛。
其实这就是draft的特点,并没有提供一个开箱即用的编辑器,而是给了一套快速高效开发编辑器的工具。
冷静下来
第一次冷静下来之后,我开始了一波新的思考。没错,故事不会如此的简单的,这么简单,那我或者岂不是太幸福了。
第一步,他既然什么都没有,那么我们就自己开发咯
这个是我自己写的编辑器的样式,四个部分
1. 前进和后退
2. 行内样式的切换,这个是一段文字可以同时拥有多个样式。
3. 块级元素的样式切换,这个的话一段文字只能拥有一个样式
4. 多媒体,超链接以及一个全屏按钮。
差不多已经够用了,不够用的可以自行网上加。
Editor是组件,EditorState是内容,那么现在我们需要渲染。就用这个吧RichUtils
import { Editor, EditorState, RichUtils } from 'draft-js'; //引入这个工具
RichUtils渲染工具,这个是最容易上手的一个方法,有了他我们就能左好多事情了。
首先我们用四步搞定行内样式那个
1. 首先呢,添加按钮,el是元素,style是可以赋予的样式。从这个数组map到编辑器里自行写办法搞定。
let defaultInlineStyle = [ { el: <span style={{ fontWeight: "bold" }}>B</span>, style: 'BOLD' }, { el: <span style={{ fontStyle: "italic" }}>I</span>, style: 'ITALIC' }, { el: <span style={{ textDecoration: "underline" }}>U</span>, style: 'UNDERLINE' }, { el: <span><div className="color-show" style={{ backgroundColor: '#e24' }}></div></span>, style: 'RED' }, { el: <span><div className="color-show" style={{ backgroundColor: '#39f' }}></div></span>, style: 'BLUE' }, { el: <span><div className="color-show" style={{ backgroundColor: '#f93' }}></div></span>, style: 'ORANGE' }, { el: <span><div className="color-show" style={{ backgroundColor: '#3a6' }}></div></span>, style: 'GREEN' } ];
let customColorStyleMap = { 'RED': { color: '#e24' }, 'BLUE': { color: '#39f' }, 'ORANGE': { color: '#f93' }, 'GREEN': { color: '#3a6' } };
2. 我们定义这个map函数,把样式名称和样式对应起来。就像上面那样。为什么没有BOLD, ITALIC, UNDERLINE呢,因为这个默认就有的
3. 编辑器里绑定方法
<Editor // basic config placeholder={'Write what you would say.'} editorState={editorState} // event onChange={this.onChange}// style customStyleMap={customStyleMap}/>
我们添加了这个customStyleMap折后,然后就可以在按钮上绑定切换样式的方法了
<div className="editor-btn-group"> {defaultInlineStyle.map(item => <span onClick={() => this.toggleInlineStyle(item.style)} key={item.style}> {item.el} </span>)} </div>
toggleInlineStyle(style) { let state = RichUtils.toggleInlineStyle(this.state.editorState, style); this.onChange(state); }
绑定添加样式的方法通过toggleInlineStyle来实现。