react editor

React-編輯終於返回了！

已經超過4年了...
現在，React-Editor返回了完全TS和React-Hooks的集成

• 帶有TS和React-Hooks的豐富文本編輯器
• 多填充解決方法，反應<16.8
• 通過CSS佔位符
• 方法：focus（），inserthtml（s），insertText（s）
• 自動保存，Restorerange，movetoend
• 使用值/onchange，defaultValue/onChange
• 在Web-image中，File WandledRop
• ProcessHTML，ProcessText WIP
• 1.x遺產：https：//github.com/fritx/reaect-editor/tree/1.x
• 2.0-alpha演示：https：//fritx.github.io/reaeact-editor

npm i -S react-editor

 import { Editor } from 'react-editor'

let [ value , setValue ] = useState ( '' )
let ref = useRef ( )

ref . focus ( )
ref . insertText ( 'foo' )
ref . insertHTML ( '<img src="https://foo.bar/baz.png">' )
value = 'set content'

< Editor
  ref = { ref }
  placeholder = "Type message to send..."
  className = { styles . editor }
  value = { value }
  onChange = { setValue }
/ > 

道具

 export interface EditorProps {
  value ?: string ;
  defaultValue ?: string ;
  className ?: string ;
  placeholder ?: string ;
  allowInWebDrop ?: boolean ;
  processHTML ?: ( html : string ) => string ;
  processText ?: ( text : string ) => string ;
  onFocus ?: ( e : React . FocusEvent < HTMLDivElement > ) => void ;
  onBlur ?: ( e : React . FocusEvent < HTMLDivElement > ) => void ;
  onDrop ?: ( e : React . DragEvent < HTMLDivElement > ) => void ;
  onPaste ?: ( e : React . ClipboardEvent < HTMLDivElement > ) => void ;
  onChange ?: ( value : string ) => void ;
  [ restProp : string ] : any ; // onto <div>
}

export interface EditorRefAttrs {
  focus : ( ) => void ;
  insertHTML : ( html : string ) => void ;
  insertText : ( text : string ) => void ;
}

用於UMD / <script>用法

 < script src =" https://unpkg.com/react " > </ script >
< script src =" https://unpkg.com/react-dom " > </ script >
< script src =" https://unpkg.com/react-editor " > </ script >
< script src =" myapp.js " > </ script > 

 // myapp.js
let React = window . React ;
let ReactDOM = window . ReactDOM ;
let { Editor } = window . ReactEditor ;

ReactDOM . render ( < Editor /> , mountNode ) ;

對於React <16.8，我們需要掛鉤polyfill解決方法

 // todo

用於React-編輯遺產版本

npm i -S [email protected]

---

該項目用Create-React-library＆React-Ts-Demo進行了引導。