react editor
1.0.0
لقد مر أكثر من 4 سنوات ...
الآن React-Editor عاد مع دمج TS و React-Hooks بالكامل
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 ) ;بالنسبة للتفاعل <16.8 نحتاج
// todoللإصدار القديم لمرحلات React-Editor
npm i -S [email protected]تم تجهيز هذا المشروع مع إنشاء مكتبة للتفاعل و React-TS-DEMO.