# Editor.js - Documentation of Murph
None

Skip to content

# Editor.js

Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.

Editor.js is fully integrated in Murph as form types.

## Classic form

    // src/Form/ExampleType.php
    namespace App\Form\ExampleType;

    use App\Core\Form\Type\EditorJsTextareaType;
    use Symfony\Component\Form\AbstractType;
    use Symfony\Component\Form\FormBuilderInterface;

    class ExampleType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder->add(
                'myField',
                EditorJsTextareaType::class
            );

            // ...
        }

        // ...
    }

Modified data should return stringified JSON array if empty:

    public function getMyField(): string
    {
        if (empty($this->myField)) {
            $this->myField = '[]';
        }

        return $this->myField;
    }

## Page form

    // src/Entity/Page/YourPage.php
    namespace App\Entity\Page;

    use App\Core\Entity\Site\Page\Block;
    use App\Core\Form\Site\Page\EditorJsTextareaBlockType;

    #[@ORM\Entity]
    class YourPage extends Page
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder->add(
                'myBlock',
                EditorJsTextareaBlockType::class,
                [
                    'label' => 'My block',
                    'row_attr' => [
                    ],
                    'options' => [
                        // options given to the sub form
                    ],
                ]
            );

            // ...
        }

        public function setMyBlock(Block $block)
        {
            return $this->setBlock($block);
        }

        public function getMyBlock(): Block
        {
            return $this->getBlock('myBlock');
        }

        // ...
    }

## Rendering

Editor.js will generate a JSON which contains blocks.

Supported blocks:

- paragraph
- header
- quote
- delimiter
- warning
- list
- nestedList
- checkList
- table
- code
- raw
- image
- link

To render HTML, the basic way is: `{{ value|editorjs_to_html }}`
If you want to render specific blocks: `{{ value|editorjs_to_html(['paragraph', 'header', ...])) }}`

Block have default templates stored in `vendor/murph/murph-core/src/core/Resources/views/editorjs`.
They can be simply overridden in `config/packages/app.yaml`:

    core:
        editor_js:
            blocks:
                paragraph: 'path/to/paragraph.html.twig'
                header: 'path/to/header.html.twig'