react-simple-wysiwyg

react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor. Demo.

Description

The project is in alpha stage.

It can be helpful if you only need basic text operations. It's:

• pretty small (~10kb, ~4kb 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 browser (sometimes it can be too dirty)
• ✗ sanitize HTML (you can use sanitize-html)
• ✗ contain a lot of feature as others (like table editor, image editor and so on)
• ✗ support old browser

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

1. Install with npm:

   npm install react-simple-wysiwyg

   or CDN (unpkg.com)

   <script src="//unpkg.com/react-simple-wysiwyg"></script>

2. Use it you React component

   import { DefaultEditor } from 'react-simple-wysiwyg';
   
   function App() {
     const [html, setHtml] = React.useState('my <b>HTML</b>');
     
     const onChange = (e) => {
       setHtml(e.target.value);
     };
   
     return (
       <DefaultEditor value={html} onChange={onChange} />
     );
   }
   

Credits

• Based on lovasoa/react-contenteditable
• Uses Material Design Icons