Simple Draft-js
Minimal wysiwyg rich editor using draftjs (Rich editor framework for React).
Demo
http://platzidev.github.io/simple-draftjs/
Install
npm i -S simple-draftjs
How to use?
;;; const buttons = name: 'bold' name: 'italic' name: 'underline' name: 'separator' name: 'unordered-list' name: 'separator' name: 'image' name: 'link' name: 'unlink' name: 'separator' name: 'code' ; /** optional css icons:const buttons = [ { name: 'bold' }, { name: 'italic' }, { name: 'underline' }, { name: 'separator' }, { name: 'unordered-list', icon: 'icon-list' }, { name: 'separator' }, { name: 'image', icon: 'icon-image'}, { name: 'link', icon: 'icon-link'}, { name: 'unlink', icon: 'icon-unlink' }, { name: 'separator' }, { name: 'code', , icon: 'icon-code' },];**/ ; { console;} { console;}
Options
Options should be set via props
Option (prop) | type | description | required |
---|---|---|---|
getContentAction | function | callback that return html or markdown content when "send" button is clicked or the state change | * |
placeholder | string | Placeholder for empty editor | - |
controls | array | list of elements to show as button options | - |
export | stirng | Format for return. options: HTML, Markdown | - |
messages | Object | text for buttons | - |
inactive | boolean | block editor if it is true | - |
inactiveStyle | object | CSS React object for inactive state | - |
hideButtonAction | func | callback for 'cancel' button click event | - |
getContentAction (required)
[function] callback that return html or markdown content when "send" button is clicked or the state change
{ console; // <p>something</p>}<Editor getContentAction=getContent />
placeholder (optional)
[string] placeholder.
controls (optional)
[array] list of elements to show as button options Note: separator is the line for serparate items "|"
name: 'bold' name: 'italic' name: 'underline' name: 'separator' name: 'unordered-list' name: 'separator' name: 'image' name: 'link' name: 'unlink' name: 'separator' name: 'code' ; <Editor controls=controls />
export (optional)
[option: "html", "markdown"] default: "html"
messages (optional)
default:
messages: {
buttons: {
send: 'Send',
cancel: 'Cancel',
}
},
How to Run?
npm install
npm start
open http://localhost:3002