README

重要

您好，此项目未维护且已归档。其内容可能已过时。

Pico 内容编辑器

为Pico CMS提供的所见即所得内容编辑器。

使用ContentTools进行实时编辑
保存到页面或主题文件
页面元数据编辑器
图片上传
通过PicoUsers进行身份验证

演示： https://pico.nliautaud.fr/PicoContentEditor

安装

下载仓库，将主文件夹命名为 PicoContentEditor 并将其复制到您的 Pico 项目中的 plugins/ 目录。

plugins/
    PicoContentEditor/
        src/
        vendor/
        ...

或者，如果您使用 composer 安装了 Pico

composer require nliautaud/pico-content-editor

设置

设置可以在 Pico 配置文件中定义，在页面元数据中定义，或者两者都可以。页面元数据设置将覆盖全局设置。

每个设置都是可选的。

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.cn/npm/ContentTools

支持的语言列表在 translations/ 目录中。

用法

通过在您的主题末尾添加以下标签来包含编辑器文件，在关闭 </body> 之前。

{{ content_editor }}

通过使用具有 data-editable、data-name 和结束注释 end-editable 的 HTML 块来定义页面中的可编辑区域。data-name 应在整个输出中唯一。

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

访问页面时，所有这些标签内的内容都将可编辑。

元数据编辑器

要在页面元数据中添加编辑器，请在 <body> 开启标签后使用以下标签。

{{ content_editor_meta }}

一个可编辑的文本区域将包含页面元数据。

主题和模板中的可编辑区域

您可以在主题中创建可编辑的块，只需使用具有 data-src 属性的源文件即可。

例如，以下代码可能是您的主题中 footer.twig 文件的内容。

<footer id="footer">
    <div data-editable data-name="footer" data-src="themes/mytheme/footer.twig">
        <p>Edit me !</p>
    </div><!--end editable-->
</footer>

固定可编辑元素

要使具有可编辑内部内容的固定元素，请使用 data-fixture 而不是 data-editable

<h1 data-fixture data-name="editable-header" data-src="themes/mytheme/header.twig">
Edit me !
</h1><!--end editable-->

此上下文中仅允许内联工具：粗体、斜体、...

可以使用 data-ce-tag 定义未识别的标签，例如固定可编辑链接和固定可编辑图像

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

有关更多信息，请参阅ContentTools。

文件上传

默认情况下，从编辑器上传的文件将保存在 Pico 安装根目录中的 images/ 目录中，位于 content/ 旁边。可以在设置中定义自定义位置。

上传目录应存在且可写。插件不会创建它。

身份验证

如果安装并检测到 PicoUsers 插件，则操作将自动限制为授权用户。

PicoUsers 配置示例

users:
    admin: $2y$10$Ym/XYzM9GsCzv3xFTiCea..8.F3xY/BpQISqW6/q3H41SmIK1reZe
    editors:
        bill: $2y$10$INwdOkshW6dhyVJbZYVm1..PxKc1CQTRG5jF.UaynOPDC6aukfkaa
rights:
    PicoContentEditor: admin
    PicoContentEditor/save: editors

nliautaud / pico-content-editor

维护者

详细信息