react-simple-wysiwyg

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} />
     );
   }
   

Custom toolbar

export default function Custom() {
  const [value, setValue] = React.useState('simple text');

  function onChange(e) {
    setValue(e.target.value);
  }

  return (
    <EditorProvider>
      <Editor value={value} onChange={onChange}>
        <Toolbar>
          <BtnBold />
          <BtnItalic />
        </Toolbar>
      </Editor>
    </EditorProvider>
  );
}

Check DefaultEditor.tsx for details.

Credits

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