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
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}