README

Laraberg 旨在提供一个简单的方法，将 Gutenberg 编辑器与您的 Laravel 项目集成。它将 Gutenberg 编辑器以及所有在 Laravel 环境中运行所需的通信和数据添加进来。

安装

使用 composer 安装包

composer require van-ons/laraberg

将供应商文件添加到您的项目（CSS、JS & 配置）

php artisan vendor:publish --provider="Babyandy0111\Laraberg\LarabergServiceProvider"

JavaScript 和 CSS 文件

该包提供了一些 JS 和 CSS 文件，这些文件应该存在于您要使用编辑器的页面上

<link rel="stylesheet" href="{{asset('vendor/laraberg/css/laraberg.css')}}">

<script src="{{ asset('vendor/laraberg/js/laraberg.js') }}"></script>

依赖项

Gutenberg 编辑器期望 React、ReactDOM、Moment 和 JQuery 在其运行环境中可用。一种简单的方法是将以下行添加到您的页面中

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

更新

在更新 Laraberg 时，您必须通过运行此命令重新发布供应商文件

php artisan vendor:publish --provider="Babyandy0111\Laraberg\LarabergServiceProvider" --tag="public" --force

使用方法

初始化编辑器

Gutenberg 编辑器应替换表单中的现有 textarea。在提交时，编辑器的原始内容将放入此 textarea 的 'value' 属性中。

<textarea id="[id_here]" name="[name_here]" hidden></textarea>

为了编辑已存在的模型上的内容，我们必须将 textarea 的值设置为 Gutenberg 编辑器提供的原始内容。

<textarea id="[id_here]" name="[name_here]" hidden>{{ $model->content }}</textarea>

要初始化编辑器，我们只需调用带有 textarea id 的 initialize 函数。您可能希望在 DOMContentLoaded 事件中这样做。

这就完成了！编辑器将替换 DOM 中的 textarea，在表单提交时，编辑器的内容将可用在 textarea 的 value 属性中。

Laraberg.init('[id_here]')

配置选项

init() 函数接受一个可选的配置对象，可以用来以某些方式更改 Laraberg 的行为。

const options = {}
Laraberg.init('[id_here]', options)

options 对象应该是 EditorSettings 对象。

interface EditorSettings {
    height?: string;
    mediaUpload?: (upload: MediaUpload) => void;
    fetchHandler?: FetchHandler;
    disabledCoreBlocks?: string[];
    alignWide?: boolean;
    supportsLayout?: boolean;
    maxWidth?: number;
    imageEditing?: boolean;
    colors?: Color[];
    gradients?: Gradient[];
    fontSizes?: FontSize[];
}

模型

为了将编辑器内容添加到模型中，Laraberg 提供了 'RendersContent' 特性。

use Babyandy0111\Laraberg\Traits\RendersContent;

class MyModel extends Model {
  use RendersContent;
}

这将为您的模型添加一个 render 方法，该方法负责渲染原始编辑器内容。默认情况下，render 方法在 content 列中渲染内容，可以通过将您的模型中的 $contentColumn 属性更改为要使用的列来更改该列。

use Babyandy0111\Laraberg\Traits\RendersContent;

class MyModel extends Model {
  use RendersContent;

  protected $contentColumn = 'my_column';
}

或者通过将列名传递给 render 方法。

$model->render('my_column');

自定义块

Gutenberg 允许开发者创建自定义块。有关如何创建自定义块的信息，您应该阅读 Gutenberg 文档。

注册自定义块相当简单。Gutenberg 块需要 title、icon 和 categories 属性。它还需要实现 edit() 和 save() 函数。

const myBlock =  {
  title: 'My First Block!',
  icon: 'universal-access-alt',
  category: 'my-category',

  edit() {
    return <h1>Hello editor.</h1>
  },

  save() {
    return <h1>Hello saved content.</h1>
  }
}

Laraberg.registerBlockType('my-namespace/my-block', myBlock)

服务器端块

服务器端块可以在 Laravel 中注册。您可能希望在 ServiceProvider 中创建一个并注册您的服务器端块在它的 boot 方法中。

class BlockServiceProvider extends ServiceProvider {
    public function boot() {
        Laraberg::registerBlockType(
          'my-namespace/my-block',
          [],
          function ($attributes, $content) {
            return view('blocks.my-block', compact('attributes', 'content'));
          }
        );
    }
}

WordPress 导出

Laraberg 在底层使用 WordPress Gutenberg 包，许多这些包公开了允许您自定义编辑器的功能。您可以在全局 Laraberg 对象中找到这些包。

Laraberg.wordpress.blockEditor
Laraberg.wordpress.blocks
Laraberg.wordpress.components
Laraberg.wordpress.data
Laraberg.wordpress.element
Laraberg.wordpress.hooks
Laraberg.wordpress.serverSideRender

babyandy0111 / laraberg

维护者

详细信息