You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
4.2 KiB
138 lines
4.2 KiB
# 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 <https://packagist.org/>, 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 `<head>` 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 :
|
|
|
|
<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-->
|
|
```
|
|
|
|
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 `<body>` :
|
|
|
|
```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
|
|
<footer id="footer">
|
|
<div data-editable data-name="footer" data-src="themes/mytheme/footer.twig">
|
|
<p>Edit me !</p>
|
|
</div><!--end editable-->
|
|
</footer>
|
|
```
|
|
|
|
## Fixed editable elements
|
|
|
|
To make fixed elements with an editable inner content, use `data-fixture` instead of `data-editable` :
|
|
|
|
```html
|
|
<h1 data-fixture data-name="editable-header" data-src="themes/mytheme/header.twig">
|
|
Edit me !
|
|
</h1><!--end editable-->
|
|
```
|
|
|
|
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
|
|
<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-->
|
|
```
|
|
|
|
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
|
|
|
|
|