DropBlockEditor

https://dropblockeditor.com/docs/beta/
Admin
DropBlockEditor is a Livewire v3 and PHP 8.1+ compatible block editor component for Laravel...
Tokens:1,812
Snippets:20
Trust Score:4.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install DropBlockEditor via Composer

Source: https://dropblockeditor.com/docs/beta/quickstart

This command installs the DropBlockEditor package using Composer, a dependency manager for PHP. Ensure you have Composer installed and configured for your PHP project.

```bash
composer require jeffreyvr/dropblockeditor
```

--------------------------------

### Render DropblockEditor Component

Source: https://dropblockeditor.com/docs/beta/setup-editor

Demonstrates how to render the basic DropblockEditor component in a Blade template, passing a title as a parameter. This is the fundamental step for integrating the editor.

```blade
@livewire('dropblockeditor', [
    'title' => 'Your example campaign',
])
```

--------------------------------

### Install DropBlockEditor for Mailcoach (Composer)

Source: https://dropblockeditor.com/docs/beta/mailcoach

Installs version 0.1.3 of the DropBlockEditor Mailcoach package using Composer. This is the recommended version for Mailcoach projects utilizing Livewire v2.

```bash
composer require jeffreyvr/dropblockeditor-mailcoach:0.1.3
```

--------------------------------

### Configure DropblockEditor Settings

Source: https://dropblockeditor.com/docs/beta/setup-editor

Details the configuration options available in the `config/dropblockeditor.php` file. These options control the inclusion of JavaScript and CSS, as well as custom branding elements like the logo and color scheme.

```php
return [
    // Optionally include the needed JS
    'include_js' => true,

    // Optionally include the CSS
    'include_css' => true,

    // Some options to apply custom branding
    'brand' => [
        'logo' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">   <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /> </svg> ',
        'colors' => [
            'topbar_bg' => 'bg-white text-gray-800',
        ],
    ]
]
```

--------------------------------

### Set Editor Content with JSON for DropblockEditor

Source: https://dropblockeditor.com/docs/beta/setup-editor

Explains how to set the initial content of the DropblockEditor using JSON data. The JSON string needs to be decoded into an array before being passed to the `activeBlocks` attribute.

```blade
@livewire('dropblockeditor', [
    'title' => 'Your example campaign',
   'activeBlocks' => json_decode($json, true)
])
```

--------------------------------

### Set Custom Base Template for DropblockEditor

Source: https://dropblockeditor.com/docs/beta/setup-editor

Shows how to specify a custom base template for the DropblockEditor component. This allows for greater control over the editor's layout and structure by referencing a custom Blade view.

```blade
@livewire('dropblockeditor', [
    'title' => 'Your example campaign',
   'base' => 'your-custom-template'
])
```

--------------------------------

### Register Button in Livewire Component

Source: https://dropblockeditor.com/docs/beta/making-buttons

This example demonstrates how to register a custom button directly when including the Livewire editor component by passing an array of button names.

```html
@livewire('dropblockeditor', [
    'buttons' => [
        'example-button'
    ]
])


```

--------------------------------

### Register Blocks in Livewire Component

Source: https://dropblockeditor.com/docs/beta/making-blocks

This example demonstrates how to register blocks directly within a Livewire component instance by passing an array of block class names to the 'blocks' attribute. This allows for dynamic block registration.

```html
@livewire('dropblockeditor', [
    'blocks' => [
        Jeffreyvr\DropBlockEditor\Blocks\Example::class,
    ]
])
```

--------------------------------

### Render DropBlockEditor Component in Blade

Source: https://dropblockeditor.com/docs/beta/quickstart

This Blade directive renders the DropBlockEditor component within your Laravel application. It requires Livewire to be installed and assumes the component is registered.

```blade
@livewire('dropblockeditor', [
    'title' => 'Your example campaign'
])
```

--------------------------------

### Publish DropBlockEditor Config File

Source: https://dropblockeditor.com/docs/beta/quickstart

This Artisan command publishes the configuration file for DropBlockEditor, allowing customization of its settings. The `--tag` option specifies the assets to be published.

```bash
php artisan vendor:publish --tag="dropblockeditor-config"
```

--------------------------------

### Publish DropBlockEditor Views

Source: https://dropblockeditor.com/docs/beta/quickstart

This Artisan command publishes the view files for DropBlockEditor, enabling customization of the editor's appearance. The `--tag` option targets the view assets.

```bash
php artisan vendor:publish --tag="dropblockeditor-views"
```

--------------------------------

### Publish DropBlockEditor Mailcoach Configuration

Source: https://dropblockeditor.com/docs/beta/mailcoach

Publishes the configuration file for the DropBlockEditor Mailcoach integration. This allows for customization of the editor's behavior.

```bash
php artisan vendor:publish --tag="dropblockeditor-mailcoach-config"
```

--------------------------------

### Publish DropBlockEditor Mailcoach Views

Source: https://dropblockeditor.com/docs/beta/mailcoach

Publishes the view files associated with the DropBlockEditor Mailcoach integration. This enables customization of the editor's appearance.

```bash
php artisan vendor:publish --tag="dropblockeditor-mailcoach-views"
```

--------------------------------

### Register Blocks in Configuration File

Source: https://dropblockeditor.com/docs/beta/making-blocks

This snippet shows how to register custom blocks by adding their class names to the 'blocks' array in the configuration file. This makes the blocks available within the DropBlockEditor.

```php
return [
    'blocks' => [
        Jeffreyvr\DropBlockEditor\Blocks\Example::class,
    ],
];
```

--------------------------------

### Register Button in Configuration

Source: https://dropblockeditor.com/docs/beta/making-buttons

This code shows how to register a custom button by adding its name to the 'buttons' array in a configuration file.

```php
return [
    'buttons' => [
        'example-button'
    ],
];
```

--------------------------------

### Create Save Button (Livewire)

Source: https://dropblockeditor.com/docs/beta/making-buttons

This snippet demonstrates how to create a custom button component in Livewire. It includes a listener for editor updates and a save method to process editor data.

```php
class ExampleButton extends Component
{
    public $properties;

    protected $listeners = [
        'editorIsUpdated' => 'editorIsUpdated',
    ];

    public function editorIsUpdated($properties)
    {
        $this->properties = $properties;
    }

    public function save()
    {
        // Example of getting a json string of the active blocks.
        // $activeBlocks = collect($this->properties['activeBlocks'])
        //     ->toJson();

        // If you want to generate the output, you can do:
        // $output = Parse::execute([
        //     'activeBlocks' => $this->properties['activeBlocks'],
        //     'base' => $this->properties['base'],
        //     'context' => 'rendered',
        //     'parsers' => $this->properties['parsers'],
        // ]);
    }

    public function render()
    {
        return <<<'blade'
            <div>
                <button wire:click="save" class="bg-blue-200 text-blue-900 rounded px-3 py-1 text-sm">Save</button>
            </div>
        blade;
    }
}
```

--------------------------------

### Enable MJML Parsing in Dropblockeditor

Source: https://dropblockeditor.com/docs/beta/parsers

This snippet shows how to enable MJML parsing by specifying the Mjml parser class and setting an MJML template as the base for the Dropblockeditor Livewire component.

```blade
@livewire('dropblockeditor', [
    'title' => 'Your example campaign',
    'base' => 'your-mjml-template'
])

```

--------------------------------

### Configure DropBlockEditor as Content Editor in Mailcoach

Source: https://dropblockeditor.com/docs/beta/mailcoach

Sets the DropBlockEditor as the content editor within the Mailcoach configuration file (`mailcoach.php`). This enables the editor for use in Mailcoach.

```php
'content_editor' => Jeffreyvr\DropBlockEditorMailcoach\Http\Livewire\EditorPlaceholder::class,
```

--------------------------------

### Create New Block with Artisan Command

Source: https://dropblockeditor.com/docs/beta/making-blocks

This command generates a new block class and an optional edit component for the DropBlockEditor. It's a fundamental step for creating custom block types. The command takes the block name as an argument.

```bash
php artisan dropblockeditor:make Text
```
Tokens:
Raw