PHPackages                             marcandreappel/laraberg - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. marcandreappel/laraberg

ActiveLibrary[Templating & Views](/categories/templating)

marcandreappel/laraberg
=======================

A Gutenberg implementation for Laravel, rebooted

074JavaScript

Since Jun 24Pushed 5y ago1 watchersCompare

[ Source](https://github.com/marcandreappel/laraberg)[ Packagist](https://packagist.org/packages/marcandreappel/laraberg)[ RSS](/packages/marcandreappel-laraberg/feed)WikiDiscussions master Synced 3w ago

READMEChangelogDependenciesVersions (1)Used By (0)

[![](./logo-text.svg)](./logo-text.svg)
========================================

[](#-)

Laraberg editor aims to provide an easy way to integrate the Gutenberg editor with your Laravel projects. It takes the Gutenberg editor and adds all the communication and data it needs function in a Laravel environment. A demo can be found at [demo.laraberg.io](http://demo.laraberg.io/). If you would like to see an example of how to implement Laraberg you can take a look at the code from the demo [over here](https://github.com/VanOns/laraberg-demo).

Table of Contents
------------------

[](#table-of-contents-)

- [Installation](#installation)
    - [JavaScript and CSS files](#javascript-and-css-files)
    - [Dependencies](#dependencies)
- [Updating](#updating)
- [Usage](#usage)
    - [Initializing the Editor](#initializing-the-editor)
        - [Using the Editor Wihout a Form](#using-the-editor-wihout-a-form)
        - [Setting the editor content](#setting-the-editor-content)
        - [Configuration options](#configuration-options)
    - [Models](#models)
        - [Renaming Gutenbergable method names](#renaming-gutenbergable-method-names)
    - [Rendering Gutenberg Content](#rendering-gutenberg-content)
    - [Custom Blocks](#custom-blocks)
        - [Registering Blocks](#registering-blocks)
        - [Registering Categories](#registering-categories)
    - [Events](#events)
    - [Sidebar](#sidebar)
        - [Checkbox](#checkbox)
        - [Radio](#radio)
        - [Select](#select)
        - [Text](#text)
        - [Textarea](#textarea)
- [Configuration](#configuration)
    - [Styling](#styling)
    - [API Routes](#api-routes)
    - [Laravel File Manager](#laravel-file-manager)
- [Search Callback](#search-callback)
- [Missing Blocks](#missing-blocks)
- [Contributing](#contributing)

Installation
------------

[](#installation)

Install package using composer:

```
composer require van-ons/laraberg
```

Add vendor files to your project (CSS, JS & Config):

```
php artisan vendor:publish --provider="MarcAndreAppel\LarabergNG\LarabergNGServiceProvider"
```

In order to store the data for the Gutenberg editor, Laraberg needs to run a database migration:

```
php artisan migrate

```

This will create the 'editor\_contents' and 'editor\_blocks' tables.

### JavaScript and CSS files

[](#javascript-and-css-files)

The package provides a JS and CSS file that should be present on the page you want to use the editor on:

```

```

### Dependencies

[](#dependencies)

The Gutenberg editor expects React, ReactDOM, Moment and JQuery to be in the environment it runs in. An easy way to do this would be to add the following lines to your page:

```

```

Updating
--------

[](#updating)

When updating Laraberg you have to publish the vendor files again by running this command:

```
php artisan vendor:publish --provider="VanOns\Laraberg\LarabergServiceProvider" --tag="public" --force
```

Usage
-----

[](#usage)

### Initializing the Editor

[](#initializing-the-editor)

The Gutenberg editor should replace an existing textarea in a form. On submit the raw content from the editor will be put in the 'value' attribute of this textarea.

```

```

In order to edit content on an already existing model we have to set the value of the textarea to the raw content that the Gutenberg editor provided.

```
{{$model->getRawContent()}}
```

To initialize the editor all we have to do is call the initialize function with the id of the textarea. You probably want to do this inside a `DOMContentLoaded` event.

The editor will replace the textarea in the DOM and on a form submit the editor content will be available in the `textarea` value attribute.

```
Laraberg.init('[id_here]')
```

### Using the Editor Without a Form

[](#using-the-editor-without-a-form)

If you want to use the editor, but for some reasons do not want to deal with submitting forms there is a way to get the content from the editor through JavaScript:

```
let content = Laraberg.getContent()
```

### Setting the editor content

[](#setting-the-editor-content)

It's possible to set the the editor's content using JavaScript:

```
Laraberg.setContent('content')
```

### Configuration options

[](#configuration-options)

The `init()` function takes an optional configuration object which can be used to change Laraberg's behaviour in some ways.

```
const options = {}
Laraberg.init('[id_here]', options)
```

The `options` object can contain the following optional keys:

KeyTypeDescription**sidebar**BooleanEnables the Laraberg sidebar if `true`**prefix**StringThe API prefix to use for requests (only use this if you changed the API location manually)**laravelFilemanager**Bool/ObjectEnables Laravel Filemanager for fileuploads if value is truth. Can be an object that contains configuration options. See [Laravel File Manager](#laravel-file-manager).**sidebar**BooleanEnables the Laraberg sidebar if `true`**searchCb**FunctionWill be called when using certain search fields within Gutenberg. See [Search Callback](#search-callback).**height**StringSets the height of the editor. Value must be a valid css height value (e.g. '10px', '50%', '100vh').**minHeight**StringSets the minHeight of the editor. Value must be a valid css min-height value (e.g. '10px', '50%', '100vh').**maxHeight**StringSets the maxHeight of the editor. Value must be a valid css max-height value (e.g. '10px', '50%', '100vh').Models
------

[](#models)

In order to add the editor content to a model Laraberg provides the `HasEditor` trait.

```
use MarcAndreAppel\LarabergNG\Models\Concerns\HasEditor;

class MyModel extends Model
 {
  use HasEditor;

}
```

This adds multiple attributes to your model that will help you with creating/updating/rendering the Gutenberg content.

```
$content = '...'; // This is the raw content from the Gutenberg editor
$model = new MyModel;

// Add or update the content
$model->editor_content = $content;

// Save the model
$model->save();

// Get the rendered HTML
$model->editor_content;

// Get the raw Gutenberg output, this should be in the target textarea when updating content
$model->editor_raw_content;
```

### Renaming HasEditor method names

[](#renaming-haseditor-method-names)

There is always the possibility that your model already implements a method with the same name as one of the Gutenbergable methods. Luckily PHP Traits provide an easy way to rename the methods from a trait:

```
class MyModel extends Model
{
  use HasEditor {
    renderContent as renderEditorContent;
  }

  public function renderContent() {
    // Your method
  }
}
```

In this example you can just call the `renderEditorContent` method to render the content.

Rendering Gutenberg Content
---------------------------

[](#rendering-gutenberg-content)

Rendering the Gutenberg content is very simple and happens like this:

```

  {!! $page->editor_content !!}

```

Keep in mind that in order to correctly display some of the Wordpress styling the Laraberg CSS has to be present on the page:

```

```

Custom Blocks
-------------

[](#custom-blocks)

Gutenberg allows developers to create custom blocks. For information on how to create a custom block you should read the [Gutenberg documentation.](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/)

### Registering Blocks

[](#registering-blocks)

Registering custom blocks is fairly easy. A Gutenberg block requires the properties `title`, `icon`, and `categories`. It also needs to implement the functions `edit()` and `save()`.

```
const myBlock =  {
  title: 'My First Block!',
  icon: 'universal-access-alt',
  category: 'my-category',

  edit() {
    return Hello editor.
  },

  save() {
    return Hello saved content.
  }
}

Laraberg.registerBlock('my-namespace/my-block', myBlock)
```

### Registering Categories

[](#registering-categories)

If you want to add your custom block to a new category you need to add that category first:

```
let title = 'My Category'
let slug = 'my-category'
Laraberg.registerCategory(title, slug)
```

Events
------

[](#events)

Laraberg implements Laravel events that you can use to implement your own listeners. The events contain a 'content' attribute that contains the relevant Content object. For information on how Laravel events work you can read the [Laravel documentation](https://laravel.com/docs/8.x/events).

- MarcAndreAppel\\LarabergNG\\Events\\ContentCreated
- MarcAndreAppel\\LarabergNG\\Events\\ContentRendered
- MarcAndreAppel\\LarabergNG\\Events\\ContentUpdated

Sidebar
-------

[](#sidebar)

Laraberg provides a way to put your form fields in a separate sidebar in the Gutenberg editor. This way you can let the editor take the entire screen while still having a place for your form fields. This is done by putting the input element in a parent element with the `.laraberg-sidebar` class. This is currently supported for the following input types:

- Checkbox
- Radio
- Select
- Text
- Textarea

For the labels Laraberg first checks if there is a label assigned to the element and will try to use that. If there is no label assigned it will check if there is a placeholder and use that as the label.

To enable the sidebar set the `sidebar` option to true when initializing Laraberg:

```
Laraberg.init('[id_here]', { sidebar: true })
```

### Checkbox

[](#checkbox)

```

  ...
  Public

```

### Radio

[](#radio)

```

  ...
  A

  B

  C

```

### Select

[](#select)

```

  ...
  Month

      January
      February
      March
      April
      ...

```

### Text

[](#text)

```

  ...

```

### Textarea

[](#textarea)

```

  ...

```

Configuration
=============

[](#configuration)

When initializing the editor there are a number of configuration options you can provide. This is still a work in progress!

Styling
-------

[](#styling)

It is possible to set the height, maxHeight, and minHeight of the editor by providing the desired values in the options object:

```
Laraberg.init('[id_here]', { height: '500px' })

Laraberg.init('[id_here]', { maxHeight: '500px' })

Laraberg.init('[id_here]', { minHeight: '500px' })
```

Placeholder
-----------

[](#placeholder)

You can change the default Gutenberg placeholder by adding a placeholder attribute to your textarea:

```

```

API Routes
----------

[](#api-routes)

After publishing the vendor files you can find the 'laraberg.php' file in your config folder. This file allows you to configure the API Routes. Here you can change the URL prefix and the middleware for the routes.

When you change the route prefix you also have to provide the prefix when you initialize the editor like this:

```
Laraberg.init('[id_here]', { prefix: '/[prefix_here]' })
```

If you wish to define the routes yourself you can do that by setting 'use\_package\_routes' to 'false' in the config. Then you can take the following routes and make changes as you see fit:

```
Route::group(['prefix' => 'laraberg', 'middleware' => ['web', 'auth']], function() {
  Route::apiResource('blocks', 'VanOns\Laraberg\Http\Controllers\BlockController');
  Route::get('oembed', 'VanOns\Laraberg\Http\Controllers\OEmbedController');
});
```

Laravel File Manager
--------------------

[](#laravel-file-manager)

Laraberg supports [Laravel File Manager](https://unisharp.github.io/laravel-filemanager/) for uploading files. To enable uploading media through Laravel File Manager the laravelFilemanager field should be set to true. This will add a 'File Manager' button to the Gutenberg media blocks that will open Laravel File Manager for uploading and selecting media files.

```
Laraberg.init('[id_here]', { laravelFilemanager: true })
```

If you are not using the default routes for Laravel File Manager you can provide the location of your Laravel File Manager endpoints in the options object like this:

```
Laraberg.init('[id_here]', { laravelFilemanager: { prefix: '/[lfm_prefix_here]' } })
```

> Note: Laraberg does not do any configuration on your Laravel File Manager setup. By default a lot of media filetypes can not be uploaded unless they are whitelisted in the Laravel File Manager configuration file. For more information on this you can check the [Laravel File Manager documentation](https://unisharp.github.io/laravel-filemanager/config).

Search Callback
===============

[](#search-callback)

The **button block** has a field that searches for pages or aritcles. In order to use this functionality you can pass a callback function when initializing Laraberg. This callback functions will receive a `search`, `perPage` and `type` parameter. The callback should return an array of objects that contain a title and an URL or a promise that resolves to such an array.

```
let customSearch = (search, perPage, type) => {
  return [
    {
      title: 'Laraberg Demo',
      url: 'demo.laraberg.io'
    }
  ]
}

Laraberg.init('content', { searchCb: customSearch })
```

Missing Blocks
==============

[](#missing-blocks)

Since we have disabled direct file uploading, some of the media blocks require a media library to operate. This means that the following blocks will only be enabled when you're using Laravel Filemanager for now:

- Cover
- Gallery
- Media & Text

Contributing
============

[](#contributing)

If you want to contribute to Laraberg checkout the [CONTRIBUTING.md](https://github.com/VanOns/laraberg/blob/master/CONTRIBUTING.md)

 [ ![](https://camo.githubusercontent.com/905d275d1c87197cba442af139245c6964dc6856748d3fec1b79f5f33bb7cb8c/68747470733a2f2f76616e2d6f6e732e6e6c2f6173736574732f6d61696c2f6c6f676f2d766f2d67726f656e2d323031392d6d61696c2e706e67) ](https://van-ons.nl)

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity30

Early-stage or recently created project

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/4620c96e07f06cc88660ac5aa15f0933df05b9900b3fda902be7371f37574c91?d=identicon)[marc-andre](/maintainers/marc-andre)

### Embed Badge

![Health badge](/badges/marcandreappel-laraberg/health.svg)

```
[![Health](https://phpackages.com/badges/marcandreappel-laraberg/health.svg)](https://phpackages.com/packages/marcandreappel-laraberg)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3861.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.0k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.2k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

291.8k](/packages/webkinder-sproutset)[awkwardideas/switchblade

Extended blade directives for laravel

102.1k](/packages/awkwardideas-switchblade)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)