# Pico Content Editor
_Read this file in [English](./README.md)_
Éditeur graphique WYSIWYG pour [SeaCMS](https://git.defis.info/SeaCMS/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](https://github.com/nliautaud) (2017-2018)
pour les parties du code provenant de https://github.com/nliautaud/pico-content-editor (licence originale MIT)
- [Jérémy Dufraisse](https://github.com/J9rem) (2023)
- [Association Defis](https://www.defis.info/) (2023)
### Licence et garanties
Voir le fichier [LICENCE](./LICENCE) (et sa traduction française [LICENCE_FR](./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 , vous devriez ajouter ces lignes dans le fichier `composer.json` du dossier de tête du projet :
```json
"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`](https://git.defis.info/SeaCMS/pico-content-editor/src/branch/master/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 ``.
```twig
{{ 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.
```html
---
Title: A page with editable content
---
The following content is editable :
This one will be converted back to markdown on saving :
- One
- Two
- Three
```
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 `` :
```twig
{{ 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.
```html
```
## Élements modifiables fixés
Pour faire un composant modifiable fixé avec un composant `inline`, utliser l'attribut `data-fixture` au lieu de `data-editable` :
```html
Edit me !
```
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 :
```html
Editable link
```
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
[ContentTools]: http://getcontenttools.com
