PHPackages                             dyusha/laravel-html-editor - 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. dyusha/laravel-html-editor

ActiveLibrary

dyusha/laravel-html-editor
==========================

Laravel package that allows inline editing of HTML blocks

v1.0.3(9y ago)241.2k7MITCSSPHP >=5.6

Since Jul 31Pushed 9y ago2 watchersCompare

[ Source](https://github.com/dyusha/laravel-html-editor)[ Packagist](https://packagist.org/packages/dyusha/laravel-html-editor)[ RSS](/packages/dyusha-laravel-html-editor/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)Dependencies (3)Versions (5)Used By (0)

Inline edit HTML blocks directly on a page
==========================================

[](#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](https://github.com/yabwe/medium-editor) wrapped into [Vue.js](http://vuejs.org/) components.

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

[](#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:

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

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

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

Publish remaining assets and migrations:

`php artisan vendor:publish --provider="Dyusha\HtmlEditor\HtmlBlocksProvider"`

Apply migrations:

`php artisan migrate`

Usage
-----

[](#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

```
@block('hero-text', 'Homepage hero text')
   Lorem ipsum dolor sit amet
@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.

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

[](#in-order-to-edit-such-blocks-you-need-to-follow-few-steps)

1. Somewhere in your layout add partial that will render required controls

    `@include('html-editor::html-manager')`
2. By default editing is allowed only for users who have `edit-html-blocks` ability so you should add it in your `AuthServiceProvider`

    ```
    // 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
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](http://vuejs.org/guide/components.html).

At this point all HTML blocks wrapped in `@block` directive should be rendered on a page as `` component and be editable:

```

   Lorem ipsum dolor sit amet

```

### Updating blocks

[](#updating-blocks)

When you press `Accept changes` button `` component will send `POST` request to `/admin/blocks` with `blocks` param that will contain all changed HTML blocks.

#### License

[](#license)

This library is licensed under the MIT license. Please see [LICENSE](LICENSE.md) for more details.

###  Health Score

33

—

LowBetter than 74% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity26

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

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.

###  Release Activity

Cadence

Every ~26 days

Total

4

Last Release

3489d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8fcddf209a99750ecbf8dedeae7791385ebf02e53acedd07a0b57e352b3b322c?d=identicon)[dyusha](/maintainers/dyusha)

---

Top Contributors

[![dyusha](https://avatars.githubusercontent.com/u/8942108?v=4)](https://github.com/dyusha "dyusha (9 commits)")

---

Tags

laravelhtmlcontent management

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/dyusha-laravel-html-editor/health.svg)

```
[![Health](https://phpackages.com/badges/dyusha-laravel-html-editor/health.svg)](https://phpackages.com/packages/dyusha-laravel-html-editor)
```

###  Alternatives

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M683](/packages/barryvdh-laravel-ide-helper)[renatomarinho/laravel-page-speed

Laravel Page Speed

2.5k1.7M10](/packages/renatomarinho-laravel-page-speed)[clickbar/laravel-magellan

This package provides functionality for working with the postgis extension in Laravel.

423715.4k1](/packages/clickbar-laravel-magellan)[api-platform/laravel

API Platform support for Laravel

59126.4k6](/packages/api-platform-laravel)

PHPackages © 2026

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