README

composer require hovornyan/laravel-grapesjs

发布文件

php artisan vendor:publish --provider="Dotlogics\Grapesjs\GrapesjsServiceProvider"

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"

php artisan migrate

npm i grapesjs

npm i grapesjs-blocks-basic

npm i grapesjs-blocks-bootstrap4

npm i grapesjs-tui-image-editor

npm i toastr

开始使用

1. 将 'gjs_data' 列添加到模型的数据库表（例如 Page）中，您将使用该编辑器。

2. 实现 Editable 接口并使用 EditableTrait 特性为 Model 类

use Illuminate\Database\Eloquent\Model;
use Dotlogics\Grapesjs\App\Traits\EditableTrait;
use Dotlogics\Grapesjs\App\Contracts\Editable;

class Page extends Model implements Editable
{
    use EditableTrait;

    ...
}

1. 创建编辑器的路由

Route::get('pages/{page}/editor', 'PageController@editor');

1. 在控制器中，使用 EditorTrait 并添加编辑方法

<?php

namespace App\Http\Controllers;

use App\Models\Page;
use Illuminate\Http\Request;
use Dotlogics\Grapesjs\App\Traits\EditorTrait;

class PageController extends Controller
{
    use EditorTrait;

    ...


    public function editor(Request $request, Page $page)
    {
        return $this->show_gjs_editor($request, $page);
    }

    ...
}

1. 打开此路由 /pages/:page_id/editor（其中 :page_id 是您的模型 ID）

占位符

占位符类似于 wordpress 中的短代码。占位符的语法是

[[This-Is-Placeholder]]

在 "/resources/views/vendor/grapesjs/placeholders" 目录中创建一个名为 "this-is-placeholder.blade.php" 的文件。

占位符将被相应的 blade 文件内容 "this-is-placeholder.blade.php" 替换

模板

您可以在 "/resources/views/vendor/grapesjs/templates" 目录中创建一个模板（一个块）。模板将在编辑器的块部分可用。

显示输出

"Editable" 模型（例如 Page）将有两个公开属性，css 和 html。在您的 blade 文件中，您可以使用这些属性来显示内容。

<style type="text/css">
	{!! $page->css !!}
</style>

{!! $page->html !!}

感谢您使用。