README

This lightweight and opinionated bundle allows to quickly render HTML blocks editable with a WYSIWYG editor (TinyMCE), either via the provided PageBlock entity, or directly already existing entities through custom twig functions.

Getting started

Download the files:

composer require arkounay/block-bundle

In AppKernel.php add the bundle:

new Arkounay\BlockBundle\ArkounayBlockBundle()

Then, run the following command:

php bin/console assets:install

In your twig template, you will then need to import the required assets:

CSS:

{% include '@ArkounayBlock/assets/include_css.html.twig' %}

JS (requires jQuery and TinyMCE):

{# Import jQuery and TinyMCE: #}
{% if has_inline_edit_permissions() %}
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.4.3/tinymce.min.js"></script>
{% endif %}

{# Then the default bundle's JavaScript: #}
{% include '@ArkounayBlock/assets/include_js.html.twig' %}

In routing.yml, you will need to import the Ajax route:

 block:
     resource: "@ArkounayBlockBundle/Resources/config/routing.yml"

Then update your database schema to add the provided PageBlock entity php bin/console doctrine:schema:update --force

Usage

To add an editable block, simply add this in a twig file:

{{ render_block('block_id') }}

The first time you're going to edit it, a new PageBlock entity will be created in your database.

To edit an already existing entity text, you can add the following line:

{{ render_entity_field(entity, 'field') }}

For example, with a "News" entity, you could add this to make its content editable:

{{ render_entity_field(news, 'content') }}
{# instead of {{ news.content }} #}

Those who don't have editing permissions will see the field as if {{ news.content }} was directly called.

There is also another version with less editing options, usually for shorter texts:

{{ render_plain_entity_field(entity, 'field') }}

Once you click on "Save", a single Ajax request is sent to persist and flush changed entities.

Notes

By default, only users with the ROLE_ADMIN permission can edit inline text. To edit the allowed roles, you can edit your config.yml

arkounay_block:
   roles: ['IS_AUTHENTICATED_ANONYMOUSLY'] # Will allow anyone to edit inline!

To edit TinyMCE, create your own @ArkounayBlock/assets/include_js.html.twig
You can also edit the .js-arkounay-block-bundle-editable to change the borders of the editable blocks.
In a twig file, you can use the function has_inline_edit_permissions() to see if a user has inline edit permissions. This can be useful if you want to import jQuery or TinyMCE only for these users.
By default, a div will be surrounding the editable text when connected. You can choose another tag with the third parameter, i.e for a span:

 {{ render_block('block_id', true, 'span') }}

you can also call this shortcut:

{{ render_span_block('block_id') }}

arkounay / block-bundle

Maintainers

Details

README

Getting started

Usage

Notes