trevormills / react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor

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

1. Install with npm:

   npm install react-simple-wysiwyg

   or CDN (unpkg.com)

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

2. 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