Download the PHP package dyusha/laravel-html-editor without Composer
On this page you can find all versions of the php package dyusha/laravel-html-editor. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download dyusha/laravel-html-editor
More information about dyusha/laravel-html-editor
Files in dyusha/laravel-html-editor
Package laravel-html-editor
Short Description Laravel package that allows inline editing of HTML blocks
License MIT
Informations about the package laravel-html-editor
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.
Installation
Install this package via composer:
composer require dyusha/laravel-html-editor
Install required npm packages:
npm install vue vue-resource medium-editor --save
Add service provider to your config file:
After that you will be able to publish config, migrations, views and needed assets.
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.
php artisan vendor:publish --provider="Dyusha\HtmlEditor\HtmlBlocksProvider" --tag=config
and change following paths
Publish remaining assets and migrations:
php artisan vendor:publish --provider="Dyusha\HtmlEditor\HtmlBlocksProvider"
Apply migrations:
php artisan migrate
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
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.
In order to edit such blocks you need to follow few steps:
-
Somewhere in your layout add partial that will render required controls
@include('html-editor::html-manager')
-
By default editing is allowed only for users who have
edit-html-blocks
ability so you should add it in yourAuthServiceProvider
- Include provided scss and js files on the page using your preferred build tools
- Include Vue.js components in your root instance or another component:
You can learn more about Vue.js components here.
At this point all HTML blocks wrapped in @block
directive should be rendered on a page as <html-block>
component and be editable:
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.
License
This library is licensed under the MIT license. Please see LICENSE for more details.