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

一個開箱即用的React富文本編輯器 🚀固然也能夠定製化啦👏

github地址: github.com/wowlusitong…

特色

• 開箱即用，無需配置
• 定製化，可自行開發任意風格和形式的工具條 [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(粗體、h一、h2等)和工具欄，它們均可以經過css重寫基礎樣式，工具欄也能夠作到徹底重寫 樣式能夠經過css自定義

每次保存數據量太大怎麼辦？

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

功能

文字裝飾

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

列表

有序列表 無序列表

對齊方式

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

標題

h1 h2 h3 h4 h5 h6

其餘

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

其餘功能持續增長中...