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

• Install with npm:

  npm install react-simple-wysiwyg

  or CDN (unpkg.com)

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

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