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?
import React from 'react';
import { render } from 'react-dom';
import Editor from 'simple-draftjs';
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' },
];
**/
render(
<Editor
getContentAction={printHTML}
hideButtonAction={closeEditor}
placeholder={"do somenthing!"}
controls={controls}
/>,
document.getElementById('root')
);
function printHTML(content) {
console.log("func ok");
}
function closeEditor() {
console.log("close");
}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
function getContent(content) {
console.log("html content", content); // <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 "|"
export default [
{ 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