2017 © Pedro Peláez
 

library ezpublish-frontendeditingbundle

Siter Frontend Editing Bundle for eZ Publish Platform

image

siter/ezpublish-frontendeditingbundle

Siter Frontend Editing Bundle for eZ Publish Platform

  • Friday, February 27, 2015
  • by peec
  • Repository
  • 5 Watchers
  • 2 Stars
  • 4 Installations
  • JavaScript
  • 0 Dependents
  • 0 Suggesters
  • 5 Forks
  • 0 Open issues
  • 1 Versions
  • 0 % Grown

The README.md

Frontend Editing Bundle for eZ Publish Platform

Full featured frontend editing bundle for eZ Publish Platform (new stack). The new eZ Publish Platform does not come with a native frontend editing tool, this bundle implements frontend editing relying heavily on Angular JS, Twitter Bootstrap and Font-awesome for the icons., (*1)

Your pagelayout needs to use boostrap and font-awesome in order for the frontend editing to look good. Meaning the design needs to be based on those., (*2)

NOTE: UNDER DEVELOPMENT - BUT somewhat usable.

Idea / Feature list

  • Angular JS frontend editing for ezpublish. Meaning single-page edit app on top of your website frontend.
  • Drag and drop things on zones based on data attributes in the HTML. Zones are defined with data- attributes.
  • Click on the thing you want to edit, edit and publish.
  • Possible to add your own FIELD TYPES (extensible) using angular methods.
  • Possible to override standard editing of field types.

TODO LIST

  • Add all common datatypes that is standard in ezpublish platform.
  • Object relation field type support
  • Richtext field type editor (when its time).
  • Allow to click on stuff on the page to edit the object that the specific thing refers to.
  • Cleanups etc.

INSTALLATION

1. Add to your composer.json

Add this to composer.json:, (*3)

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

and run:, (*4)

composer update siter/ezpublish-frontendeditingbundle

2. Setup less filter.

This bundle includes less files for the CSS of the frontend editing, you you need to setup less., (*5)

First edit config.yml, setup assetic less filter, install nodejs and less compiler., (*6)

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. Configure AppKernel and import routes.

Edit the ezpublish/EzPublishKernel.php and add:, (*7)

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

Edit the ezpublish/config/routing.yml and add:, (*8)

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

4. Dump assets.

Dump asset for prod and dev. change --env., (*9)

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

IMPLEMENT

1. Include the nessecary templates in your pagelayout

  • Bootstrap is required for your pagelayout.
  • Font-awesome is required.

This is the very important step and it needs to be done correctly in order for the frontend editing layout to work., (*10)

Right after the <body> tag add:, (*11)

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

Right after your first main page container e.g. <div id="page"> add:, (*12)

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

Right before </body> add:, (*13)

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

2. Add data attributes to container zones.

Say you list children from a parent node ( e.g. a menu or a listview or blockview of items ). If you want the editor to be able to forexample place an article and news_article in a zone add, lets see how you can do that:, (*14)

Add the following to the container of the children:, (*15)

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

Contribute

I am happy to take pull requests, feature ideas and such., (*16)

The Versions

27/02 2015

dev-master

9999999-dev

Siter Frontend Editing Bundle for eZ Publish Platform

  Sources   Download

GPL-2.0

The Requires

  • php >=5.3.3

 

by Petter Kjelkenes