125 lines
2.7 KiB
Markdown
125 lines
2.7 KiB
Markdown
# 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.
|
|
|
|
![](/_static/img/editors/editorjs.png)
|
|
|
|
## Classic form
|
|
|
|
```php-inline
|
|
// 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:
|
|
|
|
```php-inline
|
|
public function getMyField(): string
|
|
{
|
|
if (empty($this->myField)) {
|
|
$this->myField = '[]';
|
|
}
|
|
|
|
return $this->myField;
|
|
}
|
|
```
|
|
|
|
## Page form
|
|
|
|
```php-inline
|
|
// 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`:
|
|
|
|
```yaml
|
|
core:
|
|
editor_js:
|
|
blocks:
|
|
paragraph: 'path/to/paragraph.html.twig'
|
|
header: 'path/to/header.html.twig'
|
|
```
|