re editor下載 - re editor源代碼下載

re editor

其他資源

v0.5.8

下載

re-editor ·

一個開箱即用的React富文本編輯器

使用方法
- 開箱即用-提供antd 風格工具欄
- 自定義-只引入編輯器核心，可定制工具欄
常見問題
支持的功能

特點

開箱即用，無需配置
定制化，可自行開發任意風格和形式的工具條[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
readOnly	只讀模式	boolean
onImageUpload	自定義圖床	(file: File) => Promise<url: string>
tools	設置工具欄的顯示內容	Array<Array

設置工具欄顯示內容

tools props支持數組形式，如果是二維數組會分組顯示

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

名稱	功能
bold	粗體
italic	斜體
underline	下劃線
strikethrough	刪除線
orderedlist	有序列表
unorderedlist	無序列表
heading	標題
align	對齊方式
image	圖片
table	表格
code	代碼
undo	撤銷
redo	重做
fullscreen	全螢幕

自定義

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

安裝編輯器核心

$ 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 >
}