dyusha/laravel-html-editor

Laravel package that allows inline editing of HTML blocks

Inline edit HTML blocks directly on a page

This package adds an ability to inline edit any defined HTML block in your Laravel app. It uses awesome MediumEditor wrapped into Vue.js components., _(*1)

Installation

Install this package via composer:, _(*2)

composer require dyusha/laravel-html-editor, _(*3)

Install required npm packages:, _(*4)

npm install vue vue-resource medium-editor --save, _(*5)

Add service provider to your config file:, _(*6)

// config/app.php
'providers' => [
    ...
    Dyusha\HtmlEditor\HtmlBlocksProvider::class,
],

After that you will be able to publish config, migrations, views and needed assets., _(*7)

By default js and sass assets will be published to /resources/assets/js/components and /resources/assets/sass/plugins directories respectively. In order to override these settings you need to publish config file., _(*8)

php artisan vendor:publish --provider="Dyusha\HtmlEditor\HtmlBlocksProvider" --tag=config, _(*9)

and change following paths, _(*10)

// config/html-editor.php
'paths' => [
    'js' => base_path('/resources/assets/js/components'),
    'sass' => base_path('/resources/assets/sass/plugins'),
],

Publish remaining assets and migrations:, _(*11)

php artisan vendor:publish --provider="Dyusha\HtmlEditor\HtmlBlocksProvider", _(*12)

Apply migrations:, _(*13)

php artisan migrate, _(*14)

Usage

This package provides custom Blade directives @block and @endblock which can be used to wrap blocks of HTML that should be editable. For example if somewhere in your template you will have the following code, _(*15)

@block('hero-text', 'Homepage hero text')
   <h1>Lorem ipsum dolor sit amet</h1>
@endblock

the first time it's being rendered directive will try to find HTML block with slug hero-text in the database. If it is present then its content will be rendered on the page. Otherwise new HTML block will be created with slug hero-text, optional description Homepage hero text and content Lorem ipsum dolor sit amet. You can put any HTML markup between @block and @endblock directives., _(*16)

In order to edit such blocks you need to follow few steps:

1. Somewhere in your layout add partial that will render required controls, _(*17)

   @include('html-editor::html-manager'), _(*18)

2. By default editing is allowed only for users who have edit-html-blocks ability so you should add it in your AuthServiceProvider, _(*19)

   // app/Providers/AuthServiceProvider.php
   
   public function boot(GateContract $gate)
   {
       $gate->define('edit-html-blocks', function ($user) {
           // Add your logic here
           return true;
       });
   }
   

3. Include provided scss and js files on the page using your preferred build tools, _(*20)
4. Include Vue.js components in your root instance or another component:

// resources/assets/js/app.js

var Vue = require('vue');

new Vue({
    el: 'body',

    components: {
        htmlManager: require('./components/cms/manager'),
        htmlBlock: require('./components/cms/block'),
    },
});

You can learn more about Vue.js components here., _(*21)

At this point all HTML blocks wrapped in @block directive should be rendered on a page as <html-block> component and be editable:, _(*22)

<html-block slug="hero-text">
   <h1>Lorem ipsum dolor sit amet</h1> 
</html-block>

Updating blocks

When you press Accept changes button <html-manager> component will send POST request to /admin/blocks with blocks param that will contain all changed HTML blocks., _(*23)

License

This library is licensed under the MIT license. Please see LICENSE for more details., _(*24)