Pico Content Editor

Lire ce fichier en Français

A WYSIWYG content editor for SeaCMS.

live editing with ContentTools
save to pages and themes
pages metadata editor
images upload
authentification

Authors

Nicolas Liautaud (2017-2018)
for parts of code from https://github.com/nliautaud/pico-content-editor (MIT original licence)
Jérémy Dufraisse (2023)
Association Defis (2023)

Licence and warranty

See LICENCE file (and french translation 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 :

    "repositories": [
        {
            "type": "vcs",
            "url": "https://git.defis.info/SeaCMS/pico-content-editor"
        }
    ]

The supported languages are listed in the 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.

{{ 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.

---
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> :

{{ 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.

<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 :

<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.

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

4.2 KiB Raw Permalink Blame History