README
react-simple-wysiwyg
Simple and lightweight React WYSIWYG editor. Demo.
Description
It can be helpful if you only need basic text operations. It's:
- pretty small (~8.6kb, ~3.6kb gzipped)
- fast
- simple to configure
- simple to extend
Of course, it's not so powerful as other complex editors. It DOES NOT:
- ✗ change HTML generated by a browser (sometimes it can be too dirty)
- ✗ sanitize HTML (you can use sanitize-html)
- ✗ contain a lot of features as others (like table editor, image editor and so on)
- ✗ support old browsers (IE 11 is minimal)
If you need more powerful solution for React, you'd better take a look at:
- draft.js or draft-powered editor like react-rte
- classic solution like CKEditor and TinyMCE
- Quill and Summernote
Usage
Install with npm:
npm install react-simple-wysiwyg
<script src="//unpkg.com/react-simple-wysiwyg"></script>
Use the component
import React from 'react'; import { DefaultEditor } from 'react-simple-wysiwyg'; function App() { const [html, setHtml] = React.useState('my <b>HTML</b>'); function onChange(e) { setHtml(e.target.value); } return ( <DefaultEditor value={html} onChange={onChange} /> ); }
Credits
- Based on lovasoa/react-contenteditable
- Uses Material Design Icons