Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asnunes/mio-editor
A Slate JS 0.5+ and React based WYSIWYG editor.
https://github.com/asnunes/mio-editor
Last synced: 2 months ago
JSON representation
A Slate JS 0.5+ and React based WYSIWYG editor.
- Host: GitHub
- URL: https://github.com/asnunes/mio-editor
- Owner: asnunes
- License: mit
- Created: 2019-12-14T18:45:35.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T03:00:54.000Z (about 2 years ago)
- Last Synced: 2024-10-05T09:04:50.204Z (3 months ago)
- Language: JavaScript
- Homepage: https://asnunes.github.io/mio-editor
- Size: 6.4 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
LIVE DEMO: [mio-editor](https://asnunes.github.io/mio-editor)
# mio-editor
[](https://badge.fury.io/js/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?
1. It has support for **math equation** using [asciimath](http://asciimath.org/) syntax.
2. Many editors available only offer a way to edit DOM, but it is difficult to get back edited content. Mio editor can **load and update content as a simple JSON**.
3. It uses react from [slate](https://docs.slatejs.org/) 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.
```javascript
import MioEditor from 'mio-editor';
const App = () => {
const [value, setValue] = useState(null);
const onValueChange = value => {
setValue(value);
// ...
};
return (
);
};
```
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:
````json
{
"type":"header",
"children":[
{
"text":"This is an editable rich text."
}
]
},
{
"type":"paragraph",
"children":[
{
"text":"We have marks like "
},
{
"text":"bold",
"bold":true
},
{
"text":", "
},
{
"text":"italic",
"italic":true
},
{
"text":", "
},
{
"text":"underline",
"underline":true
},
{
"text":" and "
},
{
"text":"strikethrough.",
"strikethrough":true
}
]
},
{
"type":"math",
"children":[
{
"text":"sum_(i=1)^n i^3=((n(n+1))/2)^2"
}
]
},
{
"type":"code",
"children":[
{
"text":"function getIntoAnArgument(...args) {\n args.forEach(arg => console.log(arg));\n}"
}
]
},
];
````
Which represents the following visual content:
It is possible to pass an initial value to editor. Just pass it to ```useState```, where initialValue is a JSON like the one above. You can get more examples looking in the examples folder.
```javascript
const App = () => {
const [value, setValue] = useState(initialValue);
//...
}
```
### Dependencies
React 16.X.X
### Installation
```
npm install mio-editor --save
```