README

适用于eZ Publish平台的新堆栈的全功能前端编辑包。新的eZ Publish平台没有内置的前端编辑工具，此包通过Angular JS、Twitter Bootstrap和Font-awesome（用于图标）实现前端编辑。

为了使前端编辑看起来不错，您的页布局需要使用boostrap和font-awesome。这意味着设计需要基于这些框架。

注意：正在开发中 - 但可以某种程度上使用。

想法/功能列表

ezpublish的前端Angular JS编辑。这意味着在您的网站前端之上有一个单页编辑应用。
根据HTML中的数据属性在区域上拖放内容。区域通过data-属性定义。
点击您想编辑的内容，编辑并发布。
可以使用angular方法添加自己的字段类型（可扩展）。
可以覆盖标准字段类型的编辑。

待办事项列表

添加所有标准数据类型，这些类型在ezpublish平台中是标准的。
支持对象关系字段类型
富文本字段类型编辑器（到时候再说）。
允许点击页面上的内容来编辑特定内容所引用的对象。
清理等。

安装

1. 将其添加到您的composer.json

将以下内容添加到composer.json

"require": {
     "siter/ezpublish-frontendeditingbundle": "@dev"
}

然后运行

composer update siter/ezpublish-frontendeditingbundle

2. 设置less过滤器。

此包包含用于前端编辑的CSS的less文件，您需要设置less。

首先编辑config.yml，设置assetic less过滤器，安装nodejs和less编译器。

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ SiterFrontendEditingBundle ]
    #java: /usr/bin/java
    filters:
        # .....
        less:
            node: /usr/local/bin/node
            node_paths: [/usr/local/lib/node_modules]
            apply_to: "\.less$"

3. 配置AppKernel并导入路由。

编辑ezpublish/EzPublishKernel.php并添加

$bundles[] = new Siter\FrontendEditingBundle\SiterFrontendEditingBundle();

编辑ezpublish/config/routing.yml并添加

siter_frontend_editing:
    resource: "@SiterFrontendEditingBundle/Resources/config/routing.yml"
    prefix:   /frontendediting

4. 导出资产。

导出prod和dev环境的资产。更改--env。

php ezpublish/console assetic:dump --env="prod"

实现

1. 在您的页布局中包含必要的模板

Bootstrap是必需的。
Font-awesome是必需的。

这是非常重要的步骤，必须正确完成，以便前端编辑布局能够正常工作。

在<body>标签后立即添加

{% include 'SiterFrontendEditingBundle:editsuite:pagewrapper_start.html.twig' %}

在您的第一个主要页面容器后（例如<div id="page">）添加

{% include 'SiterFrontendEditingBundle:editsuite:toolbar.html.twig' %}

在</body>标签前添加

{% include 'SiterFrontendEditingBundle:editsuite:pagewrapper_end.html.twig' %}

2. 向容器区域添加数据属性。

假设您从父节点（例如菜单、列表视图或块视图）列出子项。如果您希望编辑器能够在区域中放置文章和新闻文章，请看以下操作

向子项的容器添加以下内容

<div class="content-view-children"
{% if is_granted( 'IS_AUTHENTICATED_FULLY' ) %}
    data-location="{{ parent.id }}"
    ng-drop="true"
    ng-drop-success="dropNewChildComplete($data,$event)"
    ng-drop-hit-check="dropNewChildHitCheck($data, $event)"
    data-dropablecontent
    data-allowed_contenttypes="['article','news_article']"
{% endif %}
>
Here is your normal logic to list articles and news articles.
</div>

贡献

我很乐意接受pull请求、功能想法等。

siter / ezpublish-frontendeditingbundle

维护者

详细信息