re-editor -- 開箱即用的react富文字編輯器

Aasd發表於2019-03-21
React

一個開箱即用的React富文字編輯器 ?當然也可以定製化啦?

github地址: github.com/wowlusitong…

螢幕快照 2019-03-17 23 11 49

特點

  • 開箱即用，無需配置
  • 定製化，可自行開發任意風格和形式的工具條 [API補全中]
  • 支援元素功能設定，例如修改圖片大小
  • 支援markdown語法
  • 檢視更多

使用方法

編輯器為適應不同開發需求，提供兩種使用方法

開箱即用

re-editor是一個封裝好的元件, 安裝就可以使用, 它裡面包含 @re-editor/core 和 @re-editor/toolbar-antd, 工具條預設使用antd風格，如要使用其他工具條請參考下面自定義說明

安裝依賴

$ npm install re-editor
複製程式碼

引入樣式

在js裡面引入

import 're-editor/lib/styles/index.css'
複製程式碼

也可以在css裡面引入(需要css預處理支援)

@import 're-editor/lib/styles/index.css'
複製程式碼

props

屬性 說明 型別
value 編輯器的值 object
onChange 編輯器更改內容的回撥 (value: Value) => void
placeholder 佔位文字 string

自定義

編輯器拆分為兩個部分，內容編輯區域 和 工具條，下面介紹如何自定義工具條

安裝編輯器核心

$ npm install @re-editor/core
複製程式碼

建立工具條

可以用任何方式建立編輯器工具條，需要將編輯器的例項傳給工具條，可參考 re-editor 和 @re-editor/toolbar-antd的實現，詳情檢視API文件(這部分文件還沒寫完，會在一週內補全?)

例如實現一個加粗功能:

import { command } from '@re-editor/core';

const Demo = (props) => {
  function handleClick() {
    command(props.editor)('bold')
  }
  return <div onClick={handleClick}>bold</div>
}

複製程式碼

packages介紹

  • re-editor: 一個封裝好的，包含工具條的編輯器
  • @re-editor/core: 編輯器核心
  • @re-editor/toolbar-antd: 基於antd製作的工具條，預設
  • @re-editor/examples: 演示專案

FAQ

和slate或draft-js對比有什麼區別?

slate或draft並不是一個純編輯器，它們更像是一個用於構建編輯器的框架，re-editor是基於slate開發，讓你不必關注構建編輯器的過程。

怎麼修改樣式

樣式分為兩部分，node(粗體、h1、h2等)和工具欄，它們都可以通過css重寫基礎樣式，工具欄也可以做到完全重寫 樣式可以通過css自定義

每次儲存資料量太大怎麼辦？

使用增量更新，onChange回撥的value是 immutable格式，可以使用immutable-js-diff等方法獲取diff的內容進行增量更新

功能

文字裝飾

粗體 斜體 下劃線 刪除線 上標 下標

列表

有序列表 無序列表

對齊方式

左對齊 右對齊 居中對齊 兩端對齊

標題

h1 h2 h3 h4 h5 h6

其他

  • 圖片
    • 設定大小
    • 從剪貼簿複製
  • 表格
    • 增加行
    • 增加列
    • 刪除行
    • 刪除列
  • 程式碼高亮
    • js
    • css
    • html
  • markdown
    • h1-h6: #
    • 引用: >
    • 有序列表: -
    • 無序列表: 1.

其他功能持續增加中...

相關文章