Best Rich Text Editor for React apps

React WYSIWYG editor

Fully featured, sleek and intuitive rich text editor for React ecosystem

  • Built for React (frontend, SSR)

  • Material UI user interface

  • Built with user accessibility in mind

  • Easy to integrate with your Media assets storage (for upload, embed, search)

  • Supports localization for user interface (and you can also integrate your own localization mechanism)

  • Programmable HTML tags (like <Formula /> or <LiveStream />)

  • Custom CSS

  • Easy to extend, using OOP

How it works
text/javascript
1import { useRef } from 'react'
2
3// You will need a npm access token in order to have access
4// to packages from vendor @andrei-sfia
5import { baseIOC, Editor, EditorAPI } from '@andrei-sfia/canvas-editor'
6
7// Instead of Editor you can use EditorSSR
8// if your app is rendering backend side react code.
9
10export default function Page() {
11
12 // React ref to the API of editor (to be able to fetch value)
13 const editor = useRef<EditorAPI>()
14
15 const onEditorChange = () => {
16 // The API of Editor provides the value of edited text
17 console.log(editor.current.value);
18 }
19
20 return (
21 // Editor component
22 <Editor
23 // Include your license key (see plans and pricing)
24 licenseKey={"my-license-key"}
25 // Configure editor height
26 height={{
27 cssValue: '100%' // height controlled by CSS
28 // or automatic height based on content:
29 // auto: true, // automatic editor height
30 // min: 100, // min height in pixels
31 // max: 400, // max height in pixels
32 }}
33 // Initial HTML value
34 value={'<p>html value</p>'}
35 ref={editor}
36 // Configure editor mode (richText)
37 editorMode={{
38 mode: 'richText',
39 // format of value
40 mimeType: 'text/html',
41 // html tag rewriting for SEO purposes
42 encoderOptions: {
43 i: 'em',
44 u: 'u',
45 b: 'strong'
46 },
47 decoderOptions: {}
48 }}
49 onChange={() => {
50 onEditorChange()
51 }}
52 // reference to IOC container, where you can
53 // configure global/per-instance settings
54 // (like Media Library, Custom CSS, Translations, and more)
55 iocContainer={baseIOC}
56 ></Editor>
57 )
58}