1. Go to this page and download the library: Download makraz/ux-editorjs library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
makraz / ux-editorjs example snippets
use Makraz\EditorjsBundle\Form\EditorjsType;
use Makraz\EditorjsBundle\DTO\Enums\EditorjsTool;
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('content', EditorjsType::class, [
'editorjs_tools' => [
EditorjsTool::HEADER,
EditorjsTool::LIST,
EditorjsTool::PARAGRAPH,
],
])
;
}
use Makraz\EditorjsBundle\DTO\Tools\AlignmentParagraphTool;
use Makraz\EditorjsBundle\DTO\Tools\AlignmentHeaderTool;
use Makraz\EditorjsBundle\DTO\Tools\AlertTool;
use Makraz\EditorjsBundle\DTO\Tools\AttachesTool;
use Makraz\EditorjsBundle\DTO\Tools\ToggleBlockTool;
use Makraz\EditorjsBundle\DTO\Tools\TextColorTool;
use Makraz\EditorjsBundle\DTO\Tools\NestedListTool;
use Makraz\EditorjsBundle\DTO\Tools\HyperlinkTool;
use Makraz\EditorjsBundle\DTO\Tools\StrikethroughTool;
use Makraz\EditorjsBundle\DTO\Tools\SimpleImageTool;
use Makraz\EditorjsBundle\DTO\Tools\ColumnsTool;
$builder->add('content', EditorjsType::class, [
'editorjs_tools' => [
// Aligned paragraph (replaces built-in paragraph)
new AlignmentParagraphTool(defaultAlignment: 'left'),
// Aligned header (replaces built-in header)
new AlignmentHeaderTool(levels: [1, 2, 3], defaultLevel: 2, defaultAlignment: 'left'),
// Nested list (replaces built-in list)
new NestedListTool(defaultStyle: 'unordered'),
// Alert block
new AlertTool(defaultType: 'info', defaultAlign: 'left'),
// File attachments
new AttachesTool(endpoint: '/api/upload/file'),
// Toggle block
new ToggleBlockTool(placeholder: 'Toggle title'),
// Text color
new TextColorTool(defaultColor: '#FF1300', type: 'text'),
// Hyperlink with target/rel
new HyperlinkTool(shortcut: 'CMD+K', target: '_blank', rel: 'nofollow'),
// Multi-column layout
new ColumnsTool(),
// Other tools
new StrikethroughTool(),
new SimpleImageTool(),
EditorjsTool::CODE,
EditorjsTool::QUOTE,
EditorjsTool::DELIMITER,
],
]);
new AlignmentParagraphTool(
placeholder: '', // Placeholder text
defaultAlignment: 'left', // 'left', 'center', or 'right'
preserveBlank: false, // Preserve empty paragraphs
)
new AlignmentHeaderTool(
placeholder: 'Enter a header',
levels: [1, 2, 3, 4, 5, 6],
defaultLevel: 2,
defaultAlignment: 'left', // 'left', 'center', or 'right'
)
// Default: all sibling tools are automatically available inside columns
new ColumnsTool()
new SimpleImageTool()
new StrikethroughTool()
use Makraz\EditorjsBundle\Form\EditorjsType;
use Makraz\EditorjsBundle\DTO\Enums\EditorjsTool;
use Makraz\EditorjsBundle\DTO\Tools\AlignmentBlockTune;
use Makraz\EditorjsBundle\DTO\Tools\TextVariantTune;
use Makraz\EditorjsBundle\DTO\Tools\IndentTune;
$builder->add('content', EditorjsType::class, [
'editorjs_tools' => [
EditorjsTool::HEADER,
EditorjsTool::PARAGRAPH,
EditorjsTool::LIST,
// Block Tunes — applied globally to all blocks
new AlignmentBlockTune(default: 'left'),
new TextVariantTune(),
new IndentTune(maxIndent: 5, indentSize: 24, direction: 'ltr'),
],
]);
use Makraz\EditorjsBundle\DTO\Tools\TuneInterface;
final class MyCustomTune implements TuneInterface
{
public function getName(): string
{
return 'myTune';
}
public function getPackage(): ?string
{
return 'my-custom-tune-package';
}
public function getConfig(): array
{
return [];
}
}
use Makraz\EditorjsBundle\Form\EditorjsType;
use Makraz\EditorjsBundle\DTO\Tools\HeaderTool;
use Makraz\EditorjsBundle\DTO\Tools\ListTool;
use Makraz\EditorjsBundle\DTO\Tools\ImageTool;
use Makraz\EditorjsBundle\DTO\Tools\TableTool;
use Makraz\EditorjsBundle\DTO\Enums\EditorjsTool;
$builder->add('content', EditorjsType::class, [
'editorjs_tools' => [
new HeaderTool(levels: [1, 2, 3], defaultLevel: 2),
new ListTool(defaultStyle: 'ordered', maxLevel: 3),
new ImageTool(uploadEndpoint: '/editorjs/upload/file'),
new TableTool(rows: 3, cols: 4, withHeadings: true),
EditorjsTool::CODE,
EditorjsTool::QUOTE,
EditorjsTool::DELIMITER,
],
]);
new HeaderTool(
placeholder: 'Enter a header',
levels: [1, 2, 3, 4, 5, 6],
defaultLevel: 2,
)
new ListTool(
defaultStyle: 'unordered', // 'ordered' or 'unordered'
maxLevel: 3,
)
new TableTool(
rows: 2,
cols: 3,
withHeadings: true,
)
new QuoteTool(
quotePlaceholder: 'Enter a quote',
captionPlaceholder: 'Quote\'s author',
)
new WarningTool(
titlePlaceholder: 'Title',
messagePlaceholder: 'Message',
)
new EmbedTool(
services: ['youtube', 'vimeo', 'codepen', 'github'],
)
new LinkTool(
fetchEndpoint: '/api/link-metadata',
)
new CodeTool(
placeholder: 'Enter code',
)
new ParagraphTool(
placeholder: '',
preserveBlank: false,
)
new RawTool(
placeholder: 'Enter raw HTML',
)
$builder->add('content', EditorjsType::class, [
'editorjs_tools' => [
EditorjsTool::HEADER,
EditorjsTool::PARAGRAPH,
],
'editorjs_options' => [
'placeholder' => 'Start writing your article...',
'minHeight' => 300, // pixels (int) or CSS value (string, e.g. '50%')
'maxWidth' => 900, // pixels (int) or CSS value (string, e.g. '80%')
'border' => true, // true for default border, or a CSS border string
'autofocus' => true,
'readOnly' => false,
'inlineToolbar' => true,
],
]);
use Makraz\EditorjsBundle\Form\EditorjsAdminField;
use Makraz\EditorjsBundle\DTO\Enums\EditorjsTool;
use Makraz\EditorjsBundle\DTO\Tools\HeaderTool;
public function configureFields(string $pageName): iterable
{
yield EditorjsAdminField::new('content');
}
use Makraz\EditorjsBundle\DTO\Tools\ImageTool;
$builder->add('content', EditorjsType::class, [
'editorjs_tools' => [
new ImageTool(
uploadEndpoint: '/editorjs/upload/file',
uploadByUrlEndpoint: '/editorjs/upload/url',
),
// ... other tools
],
]);
use Makraz\EditorjsBundle\Upload\UploadHandlerInterface;
use Symfony\Component\HttpFoundation\File\UploadedFile;
class MyUploadHandler implements UploadHandlerInterface
{
public function upload(UploadedFile $file): string
{
// Your upload logic here
// Return the public URL of the uploaded file
return 'https://example.com/path/to/file.jpg';
}
public function uploadByUrl(string $url): string
{
// Download from URL and store
// Return the public URL
return 'https://example.com/path/to/file.jpg';
}
}
new ImageTool(uploadEndpoint: '/api/my-custom-upload')
use Makraz\EditorjsBundle\DTO\Tools\CustomTool;
$builder->add('content', EditorjsType::class, [
'editorjs_tools' => [
// Generic CustomTool for any community tool
new CustomTool(
name: 'paragraph',
package: 'editorjs-paragraph-with-alignment',
config: ['defaultAlignment' => 'left'],
),
EditorjsTool::LIST,
EditorjsTool::CODE,
],
]);
use Makraz\EditorjsBundle\DTO\Tools\AbstractTool;
final class MyCustomBlockTool extends AbstractTool
{
public function __construct(
private readonly string $someOption = 'default',
) {
}
public function getName(): string
{
return 'myBlock';
}
public function getPackage(): ?string
{
return 'editorjs-my-block';
}
public function getConfig(): array
{
return [
'someOption' => $this->someOption,
];
}
}