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來實現。