This package provide an easy way to integrate GrapesJS into your laravel proejct.
composer require jd-dotlogics/laravel-grapesjs
php artisan vendor:publish --tag="laravel-grapesjs"
php artisan migrate
-
Add 'gjs_data' column to the model's database table (e.g Page), for which you are going to use the editor.
-
Implement Editable Interface and use the EditableTrait trait for the Model class
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;
...
}
- Next Create a Route for editor
Route::get('pages/{page}/editor', [PageController::class, 'editor']);
- In your controller, use the EditorTrait and add the editor method
<?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);
}
...
}
- Open this route /pages/:page_id/editor (where the :page_id is the id of your model)
Placeholders are like short-code in wordpress. The synax of placeholder is
[[This-Is-Placeholder]]
Create a file named "this-is-placeholder.blade.php" in "/resources/views/vendor/laravel-grapesjs/placeholders" directory.
The the placeholder will be replaced by the content of the relative blade file "this-is-placeholder.blade.php"
php artisan make:model Page -m
Paste this following code to your Page.php
model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Dotlogics\Grapesjs\App\Traits\EditableTrait;
use Dotlogics\Grapesjs\App\Contracts\Editable;
class Page extends Model implements Editable
{
use HasFactory;
use EditableTrait;
}
Migration Schema
Schema::create('pages', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->longText('gjs_data')->nullable();
$table->timestamps();
$table->softDeletes();
});
Comment out it first, if you don't have authentication page yet
// ->middleware(config('laravel-grapesjs.routes.middleware', []))
php artisan storage:link
'assets' => [
'disk' => 'local', //Default: local
'path' => 'laravel-grapesjs/media', //Default: 'laravel-grapesjs/media',
'upload_url' => null,
],
You can create global templates (or blocks) in the "/resources/views/vendor/laravel-grapesjs/templates" directory. And the templates/blocks will be availabe in the block section of edittor. You can also create model specific templates/blocks by defining getTemplatesPath/getGjsBlocksPath in model
public function getTemplatesPath(){ return 'pages_templates'; }
This will look for templates under "laravel-grapesj::pages_templates" directory.
You can also return null from these methods to hide templates/blocks for any model.
The "Editable" model (e.g. Page) will have two public properties, css and html. In your blade file you can use these properties to display the content.
<style type="text/css">
{!! $page->css !!}
</style>
{!! $page->html !!}
Thank you for using.