Cel mai bun editor de text îmbogățit pentru framework-ul React

Editor "ce vezi aia primeşti"

Editor de text îmbogățit, complet echipat, elegant și intuitiv pentru framework-ul React

  • Construit pentru React (frontend, SSR)

  • Interfața utilizator foloseşte Material UI

  • Construit cu accesibilitatea utilizatorului în gând

  • Ușor de conectat cu un storage pentru asset-uri Media (upload, embed, cǎutare)

  • Suportă traducere interfațǎ utilizator (și poți integra propriul tǎu mecanism de traduceri)

  • Tag-uri HTML programabile (cum ar fi <Formula /> sau <LiveStream />)

  • CSS personalizat

  • Uşor de extins folosind OOP

Cum funcționează
text/javascript
1import { useRef } from 'react'
2
3// Vei avea nevoie de un token de acces npm pentru a avea acces
4// la pachetele de la vendor-ul @andrei-sfia
5import { baseIOC, Editor, EditorAPI } from '@andrei-sfia/canvas-editor'
6
7// În loc de Editor poți folosi componenta EditorSSR
8// dacă aplicația ta face rendering backend side.
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}