Pico Content Editor

Read this file in English

Éditeur graphique WYSIWYG pour SeaCMS.

édition en ligne avec ContentTools
sauvegarde dans les pages et dans le thème
édition des metadata des pages
téléversement d'images
authentification

Auteurs

Nicolas Liautaud (2017-2018)
pour les parties du code provenant de https://github.com/nliautaud/pico-content-editor (licence originale MIT)
Jérémy Dufraisse (2023)
Association Defis (2023)

Licence et garanties

Voir le fichier LICENCE (et sa traduction française LICENCE_FR)

IMPORTANT: Le fichier LICENCE file ne couvre pas le contenu des dossiers vendor. Voir le fichier LICENCE fournis dans chaque sous-dossier concerné par la bibliothèque importée.

Installation

Si vous utilisez SeaCMS via composer, ce paquet sera automatiquement installé si nécessaire.

Pour l'installer dans un thème, utiliser la ligne composer require seacms/pico-content-editor. Comme ce paquet n'est pas encore publié sur https://packagist.org/, vous devriez ajouter ces lignes dans le fichier composer.json du dossier de tête du projet :

    "repositories": [
        {
            "type": "vcs",
            "url": "https://git.defis.info/SeaCMS/pico-content-editor"
        }
    ]

Les langues suportées sont listées dans le dossier js/vendor/ContentTools/translations.

Usage

Il est possible d'ajouter l'éditeur dans le thème en insérant ces lignes. Il est conseillé de la faite dans le tag html <head>.

{{ include('@PicoContentEditor/head-styles.twig') }}
{{ include('@PicoContentEditor/head-scripts.twig') }}

Pour définit des régions modifiables dans votre HTML, il faut utiliser les attributs data-editable, data-name pour le début du bloc et le commentaire de fin de bloc end-editable. data-name doit être unique pour une sortie.

---
Title: A page with editable content
---

The following content is editable :

<div data-editable data-name="pages-first-content">
    <p>Edit me!</p>
</div><!--end editable-->

This one will be converted back to markdown on saving :

<div data-editable data-name="pages-secondary-content" data-markdown markdown=1>
    - One
    - Two
    - Three
</div><!--end editable-->

Tous les contenus situés entre ces marques seront modifiables..

Éditeur metadata

Pour ajouter un éditeur de la page metadata, utiliser le code suivant après l'ouverture de la balise <body> :

{{ include('@PicoContentEditor/meta-data-editor.twig') }}

Une zone de texte édtiable contiendra les metadata à modifier.

R2gions éditables dans les thèmes et templates

IL est possible de créer des blocs modifiables dans les thèmes juste en définissant l'attribut data-src.

Par exemple, le code suivant pourrait être définit dans le fichier footer.twig de votre thème.

<footer id="footer">
    <div data-editable data-name="footer" data-src="themes/mytheme/footer.twig">
        <p>Edit me !</p>
    </div><!--end editable-->
</footer>

Élements modifiables fixés

Pour faire un composant modifiable fixé avec un composant inline, utliser l'attribut data-fixture au lieu de data-editable :

<h1 data-fixture data-name="editable-header" data-src="themes/mytheme/header.twig">
Edit me !
</h1><!--end editable-->

Seul les paramètres inline seront disponibles dans ce mode : Bold, Italic, ...

Les balises non reconnues peuvent être définies avec data-ce-tag. Par exemple, un lien modifiable fixé avec une image pourrait être :

<a data-fixture data-name="my-editable-link" data-ce-tag="p" href="/test">
Editable link
</a><!--end editable-->

<div data-fixture data-name="my-hero-image" data-ce-tag="img-fixture"
     style="background-image: url('image.png');">
    <img src="image.png" alt="Some image">
</div><!--end editable-->

Voir ContentTools pour davantage d'information.

Téléversemnt de fichiers

Par défaut, les fichiers téléversés depuis l'éditeurs sont sauvegardés dans le dossier images/ situé à la racine de l'installation de Pico, à côté du dossier content/. Une localisation personnalisée peut être configurée dans les paramètres.

Le dossier de téléversement doit exister et doit être accessible en écriture. Le plugin ne le créra pas.

Authentification

En cours de définition

4.6 KiB Raw Blame History