Editor de texto enriquecido WYSIWYG para React basado en el elemento Canvas de HTML5

El mejor editor de texto enriquecido para aplicaciones React

Editor WYSIWYG para React

Editor de texto enriquecido con todas las funciones, elegante e intuitivo para el ecosistema React

Construido para React (frontend, SSR)
Interfaz de usuario Material UI
Construido pensando en la accesibilidad del usuario
Fácil de integrar con tu almacenamiento de activos multimedia (para subir, incrustar, buscar)
Soporta localización para la interfaz de usuario (y también puedes integrar tu propio mecanismo de localización)
Etiquetas HTML programables (como <Formula /> o <LiveStream />)
CSS personalizado
Fácil de extender, usando OOP

Cómo funciona

text/javascript

import { useRef } from 'react'
// Necesitarás un token de acceso npm para tener acceso
// a los paquetes del proveedor @andrei-sfia
import { baseIOC, Editor, EditorAPI } from '@andrei-sfia/canvas-editor'
// En lugar de Editor, puedes usar EditorSSR
// si tu aplicación está renderizando código react del lado del backend.
export default function Page() {
  
  // React ref to the API of editor (to be able to fetch value)
  const editor = useRef<EditorAPI>()
  const onEditorChange = () => {
    // The API of Editor provides the value of edited text
    console.log(editor.current.value);
  }
  return (
    // Editor component
    <Editor
      // Include your license key (see plans and pricing)
      licenseKey={"my-license-key"}
      // Configure editor height
      height={{
          cssValue: '100%' // height controlled by CSS
          // or automatic height based on content:
          // auto: true, // automatic editor height
          // min: 100,   // min height in pixels
          // max: 400,   // max height in pixels
      }}
      // Initial HTML value
      value={'<p>html value</p>'}
      ref={editor}
      // Configure editor mode (richText)
      editorMode={{
        mode: 'richText',
        // format of value
        mimeType: 'text/html',
        // html tag rewriting for SEO purposes
        encoderOptions: {
          i: 'em',
          u: 'u',
          b: 'strong'
        },
        decoderOptions: {}
      }}
      onChange={() => {
        onEditorChange()
      }}
      // reference to IOC container, where you can
      // configure global/per-instance settings
      // (like Media Library, Custom CSS, Translations, and more)
      iocContainer={baseIOC}
    ></Editor>
  )
}