README

此包为 Laravel 应用添加了内联编辑任何定义的 HTML 块的能力。它使用优秀的 MediumEditor，并将其封装到 Vue.js 组件中。

安装

使用 composer 安装此包

composer require dyusha/laravel-html-editor

安装所需的 npm 包

npm install vue vue-resource medium-editor --save

将服务提供者添加到您的配置文件中

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

之后，您将能够发布配置、迁移、视图和所需的资产。

默认情况下，js 和 sass 资产将被发布到 /resources/assets/js/components 和 /resources/assets/sass/plugins 目录。为了覆盖这些设置，您需要发布配置文件。

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

并更改以下路径

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

发布剩余的资产和迁移

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

应用迁移

php artisan migrate

使用方法

此包提供了自定义 Blade 指令 @block 和 @endblock，可以用于包装应可编辑的 HTML 块。例如，如果您的模板中某处有如下代码

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

第一次渲染时，指令将尝试在数据库中查找具有 slug hero-text 的 HTML 块。如果存在，则其内容将在页面上渲染。否则，将创建一个新的 HTML 块，slug 为 hero-text，可选描述为 主页英雄文本，内容为 Lorem ipsum dolor sit amet。您可以在 @block 和 @endblock 指令之间放置任何 HTML 标记。

要编辑此类块，您需要遵循以下步骤

1. 在您的布局中添加部分，以渲染所需的控件

   @include('html-editor::html-manager')

2. 默认情况下，只有具有 edit-html-blocks 能力的用户才能进行编辑，因此您应该在 AuthServiceProvider 中添加它

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

3. 使用您喜欢的构建工具在页面上包含提供的 scss 和 js 文件

4. 在您的根实例或另一个组件中包含 Vue.js 组件

// resources/assets/js/app.js

var Vue = require('vue');

new Vue({
    el: 'body',

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

您可以在此处了解有关 Vue.js 组件的更多信息：这里.

在此阶段，所有用 @block 指令包装的 HTML 块都应在页面上作为 <html-block> 组件渲染，并可供编辑

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

更新块

当您按下 接受更改 按钮时，<html-manager> 组件将向 /admin/blocks 发送 POST 请求，其中包含 blocks 参数，该参数将包含所有更改的 HTML 块。

许可

此库采用 MIT 许可证。有关详细信息，请参阅 LICENSE.