[Nossas] Slate Editor

A complete rich text editor based on SlateJS framework

Let's install!

It's just simply run yarn add slate-editor --save or npm install slate-editor --save

How to use

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.

Plugins docs

• Alignment
• Bold
• Color
• Embed
• FontFamily
• FontSize
• Grid
• Image
• Italic
• Link
• List
• StateLogger
• Strikethrough
• ToggleReadonly
• Underline

Contributing

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 project
• yarn start or npm start

And it's done! Easy, isn't?!

References

• SlateJS - A completely customizable framework for building rich text editors.