README

Laravel Orchid 面板的 Gutenberg 编辑器

Laraberg 的目标是为您的 Laravel 项目提供一个轻松集成 Gutenberg 编辑器的方式。它将 Gutenberg 编辑器及其在 Laravel 环境中运行所需的所有通信和数据添加到其中。

安装

使用 composer 安装软件包

composer require protrafficgroup/orchid-laraberg

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

php artisan vendor:publish --provider="VanOns\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="VanOns\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 VanOns\Laraberg\Traits\RendersContent;

class MyModel extends Model {
  use RendersContent;
}

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

use VanOns\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 软件包，其中许多软件包提供了允许您自定义编辑器的功能。您可以在 global Laraberg 对象中找到这些软件包。

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

protrafficgroup / orchid-laraberg

维护者

详细信息