# Pico Content Editor
_Lire ce fichier en [Français](./LISEZMOI.md)_
A WYSIWYG content editor for [SeaCMS](https://git.defis.info/SeaCMS/seacms).
- live editing with [ContentTools]
- save to pages and themes
- pages metadata editor
- images upload
- authentification
## Authors
- [Nicolas Liautaud](https://github.com/nliautaud) (2017-2018)
for parts of code from https://github.com/nliautaud/pico-content-editor (MIT original licence)
- [Jérémy Dufraisse](https://github.com/J9rem) (2023)
- [Association Defis](https://www.defis.info/) (2023)
## Licence and warranty
See [LICENCE](./LICENCE) file (and french translation [LICENCE_FR](./LICENCE_FR))
**IMPORTANT**: LICENCE file does not cover content of folders `vendor`. See dedicated LICENCE file for each subfolder concerning the imported library.
## Installation
If you are using SeaCMS via `composer`, this package will be automatically used if needed.
To install in a theme, use `composer require seacms/pico-content-editor`.
As this package is not already published on , you should add in the `composer.json` file of the head repository project these lines :
```json
"repositories": [
{
"type": "vcs",
"url": "https://git.defis.info/SeaCMS/pico-content-editor"
}
]
```
The supported languages are listed in the *[`js/vendor/ContentTools/translations`](https://git.defis.info/SeaCMS/pico-content-editor/src/branch/master/js/vendor/ContentTools/translations)* directory.
## Usage
Include the editor files by adding the code in your theme. It is advised to put this in `` tag.
```twig
{{ include('@PicoContentEditor/head-styles.twig') }}
{{ include('@PicoContentEditor/head-scripts.twig') }}
```
Define editable regions in your pages by using HTML blocks with the attributes `data-editable`, `data-name` and a closing comment `end-editable`. `data-name` should be unique accross a single output.
```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
```
Every content inside those tags will be editable by visiting the page.
## Metadata editor
To add an editor for the pages metadata, use the following tag after the opening of `` :
```twig
{{ include('@PicoContentEditor/meta-data-editor.twig') }}
```
An editable text area will contain the page frontmatter.
## Editable regions in themes and templates
You can create editable blocks in themes, just point to the source file with the attribute `data-src`.
For exemple, the following code could be the content of a `footer.twig` file in your theme.
```html
```
## Fixed editable elements
To make fixed elements with an editable inner content, use `data-fixture` instead of `data-editable` :
```html
Edit me !
```
Only inline tools will be allowed in this context : **Bold**, *Italic*, ...
Unrecognized tags can be defined with `data-ce-tag`, for example for a fixed editable link and a fixed editable image :
```html
Editable link
```
See [ContentTools] for further info.
## Files upload
By default, files uploaded from the editor are saved in an `images/` directory located at the root of the Pico installation, next to `content/`. A custom location can be defined in the settings.
The upload directory should exist and be writeable. The plugin will not create it.
## Authentification
To be defined
[ContentTools]: http://getcontenttools.com
