2017 © Pedro Peláez
 

library laravel-html-editor

Laravel package that allows inline editing of HTML blocks

image

dyusha/laravel-html-editor

Laravel package that allows inline editing of HTML blocks

  • Wednesday, October 19, 2016
  • by dyusha
  • Repository
  • 1 Watchers
  • 15 Stars
  • 880 Installations
  • CSS
  • 0 Dependents
  • 0 Suggesters
  • 4 Forks
  • 0 Open issues
  • 5 Versions
  • 5 % Grown

The README.md

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)

The Versions

19/10 2016

dev-master

9999999-dev

Laravel package that allows inline editing of HTML blocks

  Sources   Download

MIT

The Requires

 

The Development Requires

by Avatar dyusha

laravel html content management

19/10 2016

v1.0.3

1.0.3.0

Laravel package that allows inline editing of HTML blocks

  Sources   Download

MIT

The Requires

 

The Development Requires

by Avatar dyusha

laravel html content management

08/08 2016

v1.0.2

1.0.2.0

Laravel package that allows inline editing of HTML blocks

  Sources   Download

MIT

The Requires

 

The Development Requires

by Avatar dyusha

laravel html content management

08/08 2016

v1.0.1

1.0.1.0

Laravel package that allows inline editing of HTML blocks

  Sources   Download

MIT

The Requires

 

The Development Requires

by Avatar dyusha

laravel html content management

31/07 2016

v1.0

1.0.0.0

Laravel package that allows inline editing of HTML blocks

  Sources   Download

MIT

The Requires

 

The Development Requires

by Avatar dyusha

laravel html content management