Draft.js是一個用React實現的富文本編輯器

Ali18E 8年前發布 | 98K 次閱讀 技術 HTML編輯器

來自： http://ljinkai.github.io/2016/02/27/Draft-js/

Draft.js是一個用React實現的富文本編輯器。由非死book出品。

Draft.js可以很容易的構建任何富文本的輸入，甚至是多行的文本樣式或者是復雜結構的文章。

在Draft.js的世界里，任何都是可定制的-提供可構建的區塊來達到自定義的控制用戶交互。

安裝：

npm install --save draft-js react react-dom

使用：

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    const {editorState} = this.state;
    return <Editor editorState={editorState} onChange={this.onChange} />;
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

特性一覽：

  • 實體
  • 裝飾
  • 按鍵綁定
  • 焦點控制
  • 區塊樣式
  • 自定義區塊組件
  • 復雜行內樣式
  • 嵌入列表
  • 文本方向
  • 常見問題
  • API索引：
  • 編輯組件
  • 編輯狀態
  • 內容狀態
  • 內容區塊
  • 字符元數據
  • 實體
  • 選擇狀態
  • 數據會話
  • 修改器

項目地址

 本文由用戶 Ali18E 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！