LIVE DEMO: mio-editor
mio-editor
A Slate JS 0.5+ and React based WYSIWYG editor. It's a ready-to-use react component that provides an interface to edit documents and get them as a JSON.
Implemented Features:
- Resizable Images
- Math equation
- Code
- Title
- Paragraph:
- Bold
- Italic
- Underline
- Strikethrough
Why another WYSIWYG editor?
- It has support for math equation using asciimath syntax.
- Many editor available only offer a way to edit DOM, but it's difficult to get back edited content. Mio editor can load and update content as a simple JSON.
- It uses react from slate framework to handle DOM. So you can use it individually or as a react component.
Usage
Just import MioEditor. Editor's value is handled by value
and onValueChange
props.
; const App = { const value setValue = ; const onValueChange = { ; // ... }; return <MioEditor value=value onValueChange=onValueChange /> ;};
In this example, it will render an empty page ready to be edited. Everytime an edition occur, onValueChange
will be called with a JSON representing new content. The content JSON looks like:
, , , ,];
Which represents the following visual content:
It's possible to pass and initial value to editor. Just pass it to useState
, where initialValue is a JSON like above example. You can get more looking in the examples folder.
const App = { const value setValue = ; //...}
Dependencies
React 16.X.X
Installation
npm install mio-editor --save