Bester Rich Text Editor für React-Anwendungen

React WYSIWYG Editor

Voll ausgestatteter, eleganter und intuitiver Rich Text Editor für die React-Umgebung

  • Entwickelt für React (Frontend, SSR)

  • Material UI Benutzeroberfläche

  • Mit Benutzerfreundlichkeit im Fokus entwickelt

  • Einfache Integration mit Ihrem Medienassets-Speicher (für Hochladen, Einbetten, Suche)

  • Unterstützt Lokalisierung für die Benutzeroberfläche (und Sie können auch Ihre eigene Lokalisierungsmechanik integrieren)

  • Programmierbare HTML-Tags (wie <Formula /> oder <LiveStream />)

  • Benutzerdefiniertes CSS

  • Einfach zu erweitern mit OOP

Wie es funktioniert
text/javascript
1import { useRef } from 'react'
2
3// Sie benötigen einen npm-Zugriffstoken, um Zugang zu
4// Paketen vom Anbieter @andrei-sfia zu haben
5import { baseIOC, Editor, EditorAPI } from '@andrei-sfia/canvas-editor'
6
7// Anstelle von Editor können Sie EditorSSR verwenden
8// wenn Ihre App serverseitigen React-Code rendert
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}