139 lines
4.6 KiB
Markdown
139 lines
4.6 KiB
Markdown
# 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 <https://packagist.org/>, 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 `<head>`.
|
|
|
|
```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 :
|
|
|
|
<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>` :
|
|
|
|
```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
|
|
<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` :
|
|
|
|
```html
|
|
<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 :
|
|
|
|
```html
|
|
<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
|
|
|
|
[ContentTools]: http://getcontenttools.com
|
|
|