API & CSS

Utilisation, save/load, classes CSS, référence complète

Utilisation

HTML — la page doit contenir

<div class="rdac"></div>

JS — instanciation

import Redac     from '/js/redac/redac.js'
import It_bold   from '/js/redac/it_bold.js'
import It_italic from '/js/redac/it_italic.js'

const redac = new Redac({
    inline_tools: {
        bold:   { class: It_bold },
        italic: { class: It_italic }
    }
})

Les fichiers .js sont des ES modules. Le script doit avoir type="module". L'extension .js est obligatoire dans les imports (nginx ne sert pas les .mjs avec le bon MIME type).

save()

const json = await redac.save()
// Promise<string> — JSON sérialisé, blocs vides exclus

Format de sortie :

{
    "time": 1740000000000,
    "blocks": [
        {
            "type": "paragraph",
            "data": { "text": "Bonjour <strong>monde</strong> !" }
        },
        {
            "type": "paragraph",
            "data": { "text": "Deuxième bloc", "classes": "lead mt-3" },
            "id_attr": "intro"
        }
    ]
}

Champ	Présence	Description
`time`	Toujours	Timestamp Unix en ms
`blocks[].type`	Toujours	Type du bloc : `'paragraph'`, etc.
`blocks[].data.text`	Toujours (paragraph)	innerHTML du bloc
`blocks[].id_attr`	Si défini via Tune	Attribut `id` custom pour le rendu HTML
`blocks[].data.classes`	Si défini via Tune	Classes CSS custom (ex: `lead mt-3`)

load()

redac.load(json_string)
// Remplace le contenu courant par le document JSON
// Fallback : si aucun bloc valide → un bloc vide est créé

Pour chaque bloc du JSON, load() cherche dans sa type_map la classe correspondante et appelle Block_class.load(saved). Les champs id_attr et data.classes sont restaurés sur le DOM après le rendu.

Pour qu'un type de bloc soit chargeable, il doit implémenter static load(saved) et être enregistré dans la type_map de Redac.load() : { paragraph: Paragraph, heading: Heading, ... }

Raccourcis clavier

Touche	Comportement
`Enter`	Coupe le bloc au curseur. Le texte avant le curseur reste dans le bloc courant, le texte après passe dans un nouveau bloc inséré juste après. Si le curseur est en fin de ligne → nouveau bloc vide.

Classes CSS — référence

Tout le CSS de Rédac utilise le préfixe rdac-. Le CSS de référence est dans app/views/demo/redac/index.php.

Classe	Élément	Rôle
`.rdac`	Container éditeur	`min-height`, `cursor:text`
`.rdac-block`	Chaque bloc	`position:relative`, `display:flex`, `align-items:flex-start`
`.rdac-tools`	Zone + et ⋮	Flex item gauche (52px), `opacity:0→1` au hover/focus-within
`.rdac-tool-btn`	Boutons + et ⋮	22×22px, sans border, hover cyan
`.rdac-content`	Zone éditable	Flex item droit (`flex:1`), `outline:none` au focus
`.rdac-tune-dd`	Dropdown Tune	`position:absolute; left:0; top:26px`, z-index 1000
`.rdac-tune-btn`	Boutons dans dropdown	Full-width, fond transparent
`.rdac-danger`	Modificateur	Couleur rouge — appliqué sur le bouton Supprimer
`.rdac-tune-sep`	Séparateur `<hr>`	Entre les actions et les inputs id/class
`.rdac-tune-field`	Ligne label+input	Flex row, gap 6px
`.rdac-tune-input`	Input id ou class	Fond sombre, monospace, border cyan au focus
`.rdac-tune-apply`	Bouton Appliquer	Full-width, couleur cyan
`.rdac-inline-menu`	Barre inline	`position:absolute` dans body, flex, z-index 1000