It's just simply run yarn add slate-editor --save
or npm install slate-editor --save
You can use which plugin you want. No need to use all plugins available.
In the example below we only add the Bold plugin with its button in the toolbar.
Basic example
import React from 'react'
import {
SlateEditor, SlateToolbar, SlateContent,
BoldPlugin, BoldButton
} from 'slate-editor'
const plugins = [BoldPlugin()]
const SlateRichTextEditor = () => (
<SlateEditor plugins={plugins}>
<SlateToolbar>
<BoldButton />
</SlateToolbar>
<SlateContent />
</SlateEditor>
)
export default SlateRichTextEditor
And it's done! 🚀
Take a look at the full working example.
- Alignment
- Bold
- Color
- Embed
- FontFamily
- FontSize
- Grid
- Image
- Italic
- Link
- List
- StateLogger
- Strikethrough
- ToggleReadonly
- Underline
To help us develop new features or fix bugs, to setup your development environment is too simple. Just follow the steps:
git clone git@github.com:nossas/slate-editor.git
the projectyarn install
ornpm install
to install all the dependency packagesyarn start
ornpm start
And it's done! Easy, isn't?!
To get the ImagePlugin working in 100% of its functionality, you need to define the environment variables below:
- REACT_APP_API_URL: e.g. https://api.bonde.org
- The URL of the API
- REACT_APP_SIGNING_URL_ENDPOINT: e.g.
/uploads
- The endpoint that will sign the URL to upload the image to AWS S3.
- To sign the URL on your API, you can check an example with RoR here.
- SlateJS - A completely customizable framework for building rich text editors.