A WYSIWYG content editor for Pico CMS.
- live editing with ContentTools
- save to pages or themes files
- pages metadata editor
- images upload
- authentification with PicoUsers
Demo : https://pico.nliautaud.fr/PicoContentEditor
Download the repository, name the main folder PicoContentEditor and copy it into the plugins/ directory of your Pico project.
plugins/
PicoContentEditor/
src/
vendor/
...
Or, if you installed Pico with composer :
composer require nliautaud/pico-content-editor
Settings can be defined in the Pico config file, in a page metadata, or both. The page metadata settings will override the site-wide ones.
Every setting is optionnal.
PicoContentEditor:
show: true # show/hide the editor
debug: true # enable errors reporting
language: fr # supported language code
uploadpath: myfiles # upload directory (images/ by default)
# custom ContentTools library location (local files by default)
ContentToolsUrl: https://cdn.jsdelivr.net/npm/ContentToolsThe languages supported are listed in the translations/ directory.
Include the editor files by adding the following tag at the end of your theme, before the closing </body>.
{{ content_editor }}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.
---
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.
To add an editor for the pages metadata, use the following tag after the opening of <body> :
{{ content_editor_meta }}An editable text area will contain the page frontmatter.
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.
<footer id="footer">
<div data-editable data-name="footer" data-src="themes/mytheme/footer.twig">
<p>Edit me !</p>
</div><!--end editable-->
</footer>To make fixed elements with an editable inner content, use data-fixture instead of data-editable :
<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 :
<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.
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.
If the PicoUsers plugin is installed and detected, actions are automatically restricted to authorized users.
| Right | Desc |
|---|---|
PicoContentEditor |
All rights below. |
PicoContentEditor/save |
Editing regions in pages and themes source files. |
PicoContentEditor/upload |
Uploading files on the server. |
Configuration example of PicoUsers :
users:
admin: $2y$10$Ym/XYzM9GsCzv3xFTiCea..8.F3xY/BpQISqW6/q3H41SmIK1reZe
editors:
bill: $2y$10$INwdOkshW6dhyVJbZYVm1..PxKc1CQTRG5jF.UaynOPDC6aukfkaa
rights:
PicoContentEditor: admin
PicoContentEditor/save: editors
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent