README

简单的行内编辑工具栏，用于更新任何HTML块或特定数据库表的内容。

此包是 dyusha/laravel-html-editor 的更新版本，增加了一些额外功能并更新了依赖项。

安装

下载此 git 仓库，或通过 composer 安装

composer require swatty007/laravel-inline-editor

同时确保获取我们的 npm 依赖项

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

配置

注意：在 Laravel 5.5 或更高版本 中是可选的

将以下内容添加到您的配置文件中

// config/app.php
'providers' => [
    ...
    swatty007\LaravelInlineEditor\InlineEditorServiceProvider::class,
],

初始设置

运行：php artisan vendor:publish

• 将以下代码片段包含到您的应用布局文件中，例如："view/layouts/app.blade.php"。这将使您的页面上显示必要的控件。

{{-- Start Laravel Inline Editor Components --}}
    @include('laravel-inline-editor::html-manager')
{{-- End Laravel Inline Editor Components --}}`

• 之后，通过以下命令应用我们的默认表格

php artisan migrate

• 默认情况下，只有具有 laravel-inline-editor 权能的用户才能进行编辑，因此您应该在您的 AuthServiceProvider 中添加它

  // app/Providers/AuthServiceProvider.php
  use Illuminate\Contracts\Auth\Access\Gate as GateContract;
  
  public function boot(GateContract $gate)
  {
     //...
      $gate->define('laravel-inline-editor', function ($user) {
          // Add your logic here
          return true;
      });
  }

• 使用您首选的构建工具在页面上包含提供的 .scss 和 .js 文件。对于 Laravel Mix

// resources/assets/js/app.js
Vue.component('inlineManager', require('./components/laravel-inline-editor/manager'));
Vue.component('inlineContentBlock', require('./components/laravel-inline-editor/contentBlock.vue'));

// resources/assets/sass/app.scss
// Inline Editor
@import "./plugins/_medium-editor.scss";

自定义

您可以发布包的配置文件，以调整其行为或外观

php artisan vendor:publish

要更改 medium 编辑器的默认行为，只需覆盖配置文件中的选项设置即可

// config/laravel-inline-editor.php
'options' => '{ \'anchor\': { \'targetCheckbox\': true }, \'toolbar\': { \'buttons\': [\'bold\', \'italic\', \'underline\'] } }',

默认情况下，js 和 sass 资产将发布到 /resources/assets/js/components 和 /resources/assets/sass/plugins 目录。要更改此设置，只需更新以下路径中的配置文件即可

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

用法

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

简单
将包含的 HTML 内容保存到 laravel-inline-editor 表的 item01 键下。

{{-- Simple Content Block --}}
@inlineEditor( 'item01' )
    <p>Lorem text for our text block</p>
@endInlineEditor

自定义表格
要将包含的 HTML 保存到自定义表格中，只需指定表名、源和目标键。如果未定义源或目标键，则将使用默认的 key 和 content。

{{-- Custom Database Content Block --}}
{{-- $source_value, $table, $source_key, $target_key, $options --}}
@inlineEditor('example_item', 'example_objects', 'title', 'content' )
    {{ \Illuminate\Support\Facades\DB::table('example_objects')->where('title', 'example_item')->first() }}
@endInlineEditor

自定义选项

您可以通过覆盖默认选项来覆盖 medium 编辑器的默认选项

{{-- Shows the usage of the options property --}}
@inlineEditor( 'item01', null, null, null, "{ 'anchor': { 'targetCheckbox': true }, 'toolbar': { 'buttons': ['bold', 'italic', 'underline'] } }" )
    <p>Lorem text for our text block</p>
@endInlineEditor

有关详细信息，请参阅 medium js 文档： https://github.com/yabwe/medium-editor#mediumeditor-options

注意：查看配置设置以覆盖默认选项

属性

1. 源值 - 数据库行，其中我们查找源键。
2. 表 - 将覆盖在哪个表中查找上述定义的值。
3. 源键 - 允许覆盖在哪个数据库行中查找源值。
4. 目标键 - 允许覆盖在哪个数据库行中将更新。
5. 编辑器选项 - 允许您指定 medium 编辑器的额外选项。
6. 验证规则 - 允许您定义一组自定义验证规则。
7. 去除HTML - 在将输入字符串保存到数据库之前，将移除所有HTML元素。

首次渲染指令时，将尝试通过默认数据库中定义的键来查找元素内容，除非有其他指定。如果存在，则其内容将在页面上渲染。

否则，将根据给定参数创建新的HTML块。您可以在@inlineEditor和@endInlineEditor指令之间放置任何HTML标记。

工作流程

当您点击“接受更改”按钮时，<html-manager>组件将向/inline-content-block发送带有blocks参数的POST请求，该参数将包含所有更改的HTML块。

许可

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