Éditeur de texte enrichi WYSIWYG pour React basé sur un élément HTML5 Canvas

Meilleur éditeur de texte enrichi pour les applications React

Éditeur WYSIWYG React

Éditeur de texte enrichi complet, élégant et intuitif pour l'écosystème React

Conçu pour React (frontend, SSR)
Interface utilisateur Material UI
Développé avec un souci d'accessibilité pour l'utilisateur
Intégration facile avec votre stockage de ressources multimédias (téléchargement, intégration, recherche)
Prend en charge la localisation de l'interface utilisateur (et vous pouvez également intégrer votre propre mécanisme de localisation)
Balises HTML programmables (comme <Formula /> ou <LiveStream />)
CSS personnalisé
Facile à étendre, en utilisant la POO

Fonctionnement

text/javascript

import { useRef } from 'react'
// Pour avoir accès aux packages du fournisseur @andrei-sfia,
// vous aurez besoin d'un jeton d'accès npm
import { baseIOC, Editor, EditorAPI } from '@andrei-sfia/canvas-editor'
// Vous pouvez utiliser EditorSSR à la place de Editor
// si votre application génère du code React côté serveur.
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>
  )
}