jd-dotlogics/laravel-grapesjs

一个将GrapesJS轻松集成到您的Laravel项目的包。

安装次数: 13,645

依赖项: 0

建议者: 0

安全性: 0

星级: 0

关注者: 0

分支: 54

语言:JavaScript

3.4.1 2023-05-26 06:27 UTC

README

此包提供了一种将GrapesJS集成到您的Laravel项目的简单方法。

安装

composer require jd-dotlogics/laravel-grapesjs

发布文件和迁移

php artisan vendor:publish --tag="laravel-grapesjs"

php artisan migrate

入门指南

  1. 将'gjs_data'列添加到模型的数据库表(例如 Page)中,您将在此处使用编辑器。

  2. 实现Editable接口,并在模型类中使用EditableTrait特质。

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/laravel-grapesjs/placeholders"目录中创建一个名为"this-is-placeholder.blade.php"的文件。

然后占位符将被相应的blade文件内容所替换

模板

您可以在"/resources/views/vendor/laravel-grapesjs/templates"目录中创建全局模板(或块)。模板/块将在编辑器的块部分中可用。您还可以通过在模型中定义getTemplatesPath/getGjsBlocksPath来创建特定于模型的模板/块。

public function getTemplatesPath(){ return 'pages_templates'; }

这将查找"laravel-grapesj::pages_templates"目录下的模板。

您也可以从这些方法中返回null,以隐藏任何模型的模板/块。

输出显示

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

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

{!! $page->html !!}

感谢使用。