Download the PHP package m6web/draftjs-bundle without Composer

DraftjsBundle

This Symfony bundle aims to convert Draft.js state into an equivalent PHP object model and providing necessary tools for rendering html.

Installation

This library can be easily installed via composer

composer require m6web/draftjs-bundle

Then register the bundle:

YAML configuration reference

The configuration allow you to customize class names of blocks, inline styles and text alignment.

The inline key allow any string to customize class name of inline style text, for example, if you want to define the class name of BOLD style, just define your configuration as below:

Objects model

DraftjsBundle follow the Draft.js object model.

ContentState : Represent the document
ContentBlock : Represent a single block
DraftEntity : Represent a Draft.js entity
CharacterMetadata : Represent a character with style and entity

Draft.js supports

DraftjsBundle supports default Draft.js blocks type, has listed below:

- atomic
- unstyled
- paragraph
- unordered-list-item
- ordered-list-item
- header-one
- header-two
- header-three
- header-four
- header-five
- header-six
- blockquote

You can extends this list by implementing custom renderer has show in section Renderers

Exception

• DraftjsException

ContentStateConverter

Convert a Draft.js state into php model object.

m6_web_draftjs.content_state_converter

HtmlBuilder

Build html from a ContentState object.

m6_web_draftjs.html_builder

HtmlRenderer

Object for converting and rendering a Draft.js state into html.

m6_web_draftjs.html_renderer

Renderers

In addition to the global HtmlRenderer, we provide the possibility to extends rendering engine by adding new renderers.

We distinguished 3 types of renderer, depending on what you we want to customize,

• block
• inline entity
• block entity

There is also another renderer not listed here, the ContentRenderer responsible of rendering the HTML within a block from text and inline style.

The only things you have to do is to create a service then tagged it as expected.

Adding custom block renderer

First define your service:

In order to be fully support by our rendering engine, you must tag your service with draftjs.block_renderer and you must extend AbstractBlockRenderer who implement the BlockRendererInterface interface.

Illustration with the AcmeBlockRenderer class:

Adding custom inline entity renderer

Inline renderer are used for displaying entity information in block content has string.

First define your service:

In order to be fully support by our rendering engine, you must tag your service with draftjs.inline_entity_renderer and you must extend AbstractInlineEntityRenderer who implement the InlineEntityRendererInterface interface.

Illustration with the LinkInlineEntityRenderer class:

Notice the use of InlineRendererHelperTrait

Adding custom block entity renderer

Entity block renderer are used for displaying entity information as a block.

First define your service:

In order to be fully support by our rendering engine, you must tag your service with draftjs.block_entity_renderer and you must extend AbstractBlockEntityRenderer who implement the BlockEntityRendererInterface interface.

Illustration with the LinkInlineEntityRenderer class:

Helpers

Inline renderer helper

Block renderer helper