This package provide an esay way to integrate GrapesJS into your laravel proejct.
License: MIT License
hi !
i want to merge all plugins in one file.
but I face undefined plugin issue .
and plugin doesn't load .
Documentation not enough? plz make Tutorial
Hello
Why don't these options appear? https://ibb.co/ZVt5P8x
Hello jd. Can you add functionality to add templates not only to the templates folder, but other folders inside "templates" and show this folders in visual? This will help separate custom templates.
Hello,
Working with "jd-dotlogics/laravel-grapesjs": "^3" I need to extend data returned from server's requests.
I found that server's requests are implemented in
/vendor/jd-dotlogics/laravel-grapesjs/src/App/Repositories/AssetRepository.php
/vendor/jd-dotlogics/laravel-grapesjs/src/App/Editor/AssetManager.php
files.
I can not edit these files, as any file any “/vendor” subdirectory would be overwritten by composer.
If there is a way to use copied under project directories these files and use them, modifying where I need it ?
Thanks!
i tried to solve it but i can't
demo : https://youtu.be/Tu6xBx4i3dc
In laravel 8 app with "jd-dotlogics/laravel-grapesjs": "^3" I need to modify images editor,like adding
custom inputs and additive parameters to server's request when reading images
I see that AssetManager is used and at link https://grapesjs.com/docs/modules/Assets.html#customization
I read about customization of assets and wonder in which way I can create and use custom AssetManager in jd-dotlogics/laravel-grapesjs plugin ?
Thanks!
HI, Thanks for this package!
I am trying to insert it in a Laravel 9 installation with:
composer require jd-dotlogics/laravel-grapesjs
but
Problem 1 - jd-dotlogics/laravel-media[2.0.0, ..., 2.0.8] require illuminate/support ~5.6.0|~5.7.0|~5.8.0|^6.0|^7.0|^8.0 -> found illuminate/support[v5.6.0, ..., 5.8.x-dev, v6.0.0, ..., 6.x-dev, v7.0.0, ..., 7.x-dev, v8.0.0, ..., 8.x-dev] but these were not loaded, likely because it conflicts with another require. - jd-dotlogics/laravel-grapesjs[3.0.0, ..., 3.x-dev] require jd-dotlogics/laravel-media ^2 -> satisfiable by jd-dotlogics/laravel-media[2.0.0, ..., 2.0.8]. - Root composer.json requires jd-dotlogics/laravel-grapesjs ^3.0 -> satisfiable by jd-dotlogics/laravel-grapesjs[3.0.0, 3.x-dev].
i am new to the laravel world but i think my problem is that within the composer.json of the project :
jd-dotlogics/laravel-media
I can't find compatibility with Laravel 9
"illuminate/support": "~5.6.0|~5.7.0|~5.8.0|^6.0|^7.0|^8.0",
Do you have any suggestions for solving this?
Kind Regards
Hello,
using laravel-grapesjs "3.3.0" I have several blocks of data “Extra”, "Basick", “Forms”, “Templates” and custom blocks,
which are based on “grapesjs-tailwind”. If there is a way to change order of these blocks ?
How can I do it ?
Thanks!
Using jd-dotlogics/laravel-grapesjs 3 in laravel 8 app Can I do custom button for elements in GrapeJS editor
with possibility to enter title/url of this new custom button: https://prnt.sc/yCg4SyzkPfhD
Thanks!
composer require jd-dotlogics/laravel-grapesjs php artisan vendor:publish --tag="laravel-grapesjs"
namespace App\Models;
use \DateTimeInterface;
use App\Traits\Auditable;
use Dotlogics\Grapesjs\App\Contracts\Editable;
use Dotlogics\Grapesjs\App\Traits\EditableTrait;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
class ContentPost extends Model implements HasMedia,Editable
{
use SoftDeletes;
use InteractsWithMedia;
use Auditable;
use HasFactory;
use EditableTrait;
---
namespace App\Http\Controllers\Admin;
use ..
class ContentPostController extends Controller
{
use MediaUploadingTrait;
use CsvImportTrait;
use EditorTrait;
public function editor(Request $request, ContentPost $page)
{
return $this->show_gjs_editor($request, $page);
}
--
Route::get('editpage/{page}', 'ContentPostController@editor')->name('content-posts.editor');
Now page is working but on saving response is 500 of course because of no columns
{ "message": "SQLSTATE[42S22]: Column not found: 1054 Unknown column 'gjs_data' in 'field list' (SQL: update `content_posts` set `gjs_data` = {\"components\":\"[{\\\"type\\\":\\\"text\\\",\\\"content\\\":\\\"Amazing tool , lets,see what we can do?<\\/p>\\\\n\\\",\\\"attributes\\\":{\\\"id\\\":\\\"iznd\\\"}},{\\\"type\\\":\\\"text\\\",\\\"components\\\":[{\\\"type\\\":\\\"textnode\\\",\\\"content\\\":\\\"\\\\n\\\\tExample Template\\\\n\\\"}]},{\\\"type\\\":\\\"text\\\",\\\"components\\\":[{\\\"type\\\":\\\"textnode\\\",\\\"content\\\":\\\"Example Block\\\"}]}]\",\"styles\":\"[{\\\"selectors\\\":[\\\"#iznd\\\"],\\\"style\\\":{\\\"padding\\\":\\\"10px\\\"}}]\",\"css\":\"* { box-sizing: border-box; } body {margin: 0;}#iznd{padding:10px;}\",\"html\":\"
Amazing tool , lets,see what we can do?<\\/p>\\n<\\/div>
\\n\\tExample Template\\n<\\/div>Example Block<\\/div><\\/body>\"}, `content_posts`.`updated_at` = 2022-10-06 12:57:00 where `id` = 1)", "exception": "Illuminate\\Database\\QueryException", "file": "C:\\xampp\\htdocs\\coai\\laravel\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php", "line": 712, "trace": [ { "file"
what is missing out here ?
delete button doesn't work when user click on it .
after i refreshed the page , images are still there.
screenshot : https://prnt.sc/CvyKHPhmOlFo
what i want to know is which class the request sent to when user clicked on delete btn, and how to edit it using appServiceProvider
and thanks
First of all. Really great and easy package!
I was wondering if anyone has managed to activate the Style Manager? See below screenshot.
Hello JD,
Is it possible to add some svg image to custom templates and blocks, which is added to the views/vendor/laravel-grapesjs/gjs-blocks and templates directories?
i tried to add image editor but it shows me the following error :
editor.js:2 The defination for plugin 'image-editor' not found.
i added it in custom plugins exemple
'custom' => [
'grapesjs-custom-code' => 'https://unpkg.com/grapesjs-custom-code',
[
'enabled' => true,
'name' => 'image-editor',
'styles' => [
'https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.15.3/tui-image-editor.min.css',
],
'scripts' => [
'https://unpkg.com/tui-image-editor',
],
'options' => [
//plugin options goes here
],
]]
2 - how i can remove iframe component .
Do u have any solution please .
This version needs PHP8. It fails in earlier versions due to the union types declarations in PluginManager.
hi
please tell me how to append block manager to another element , please give me example
note : I know how to add custom plugin .
and thanks for your efforts
exemple
'enabled' => true,
'name' => 'my-plugin',
'options' => [
// 'root' => [
// 'css' => [
// // others
// 'style.css' => '(editor) => editor.getCss()',
// ],
// 'index.html' => '<script language=\'javascript\'>
// (editor) =>
// `<!doctype html>
// <html lang="en">
// <head>
// <meta charset="utf-8">
// <link rel="stylesheet" href="./css/style.css">
// </head>
// ${editor.getHtml()}
// </html>`
// </script>',
// ],
],
'scripts' => [
'url',
],
How to config this line on laravel-grapejs.config
allowScripts: 1,
Hello,
Thank you for create a wonderful Package, but im wondering is there any documentation or tutorial ?
Thank you.
Working with grapesjs components (jd-dotlogics/laravel-grapesjs 3 plugin) in
laravel 8 app I want to show custom youtube video.
So I imporeted all components from Basic/Extra groups into database and modified cont5ent of video url with valid youtube url :
<div id="inj62" data-gjs-type="video" draggable="true" allowfullscreen="allowfullscreen" class="">
<video src="https://www.youtube.com/watch?v=m3UrMOCREow" class="gjs-no-pointer" controls="" poster="" style="height: 100%; width: 100%;"></video>
</div>
But video does not work and I see error in the console :
Request URL: ```
http://landigator.test/pages/1/%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22100%22%20viewBox=%220%200%2024%2024%22%20style=%22fill:%20rgba(0,0,0,0.15);%20transform:%20scale(0.75)%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d=%22M8.5%2013.5l2.5%203%203.5-4.5%204.5%206H5m16%201V5a2%202%200%200%200-2-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2z%22%3E%3C/path%3E%20%20%20%20%20%20%3C/svg%3E
Referrer Policy: strict-origin-when-cross-origin
In console I see invalid video definition : https://prnt.sc/Cbwl0kdYI_sJ
How can it be salved ?
Thanks!
in config
'default' => [
'basic_blocks' => true,
'bootstrap4_blocks' => false,
'code_editor' => true,
'image_editor' => true,
'custom_fonts' => [],
'templates' => true
],
screenshot : https://prnt.sc/WggH-yulJCBa
I tried local file storage for Image uploading and worked perfectly fine, But when I switched to s3, gives me s3 error.
found 1 error while validating the input provided for the getobject operation:\n[key] expected string length to be >= 1, but found string length of 0 laravel
Then I implemented own AssetController, that worked fine.
In laravel 8 app "jd-dotlogics/laravel-grapesjs": "^3" is used and
https://github.com/Ju99ernaut/grapesjs-tailwind plugin is used to add custom block at grapejs editor, which
looks like https://prnt.sc/cITyK6U2AKzM
I need to add custom blocks based on data of our app at this area.
Reading https://github.com/Ju99ernaut/grapesjs-tailwind page I did not find any possibility to add custom blocks in sinilar way.
So in file config/laravel-grapesjs.php I replaced path to grapesjs-tailwind file :
[
'name' => 'grapesjs-tailwind',
'options' => [],
'scripts' => [
// 'https://unpkg.com/grapesjs-tailwind'
'js/custom-grapesjs-tailwind.min.js'
]
]
I saved file as public/js/custom-grapesjs-tailwind.min.js and unpacking it try to this file manually.
All these items are filled in big array like : https://prnt.sc/VihL339Z2-g1
I try to run request with axios, but I have a problem that I can not to import axios in plain js file:
window.axios = require('axios');
window.axios.get('pages/{page_id}/get-custom-blocks')
.then(({data}) => {
I got error :
ReferenceError: require is not defined
With line :
import { axios } from 'axios'
I got error :
Uncaught SyntaxError: Cannot use import statement outside a module
Thanks!
Hi, May I know how to add custom font on the typography for this one? I checked laravel-grapesjs.php and there is a custom_fonts under plugins. I tried this but the font still wont appear.
'plugins' => [ 'default' => [ 'basic_blocks' => false, 'bootstrap4_blocks' => false, 'code_editor' => true, 'image_editor' => false, 'custom_fonts' => [ [ 'value'=>'Barlow, sans-serif', 'name'=>'Barlow', ], ], 'templates' => false, ] ]
Documentation not enough? plz make Tutorial
Do you plan to support laravel 9?
how to use bootstrap plugin block?
Hi,
Thank you for great work. It saved me lots of effort and time.
How can I push my own customization to the grapesjs without touching the vendor folder? Is there a way to do that?
Hello,
using laravel-grapesjs( "3.3.0" ) from some time settings in right toolbar on selected element (like https://prnt.sc/2GwbfSRTwHAr )
disappeared for selected element.
In /config/laravel-grapesjs.php I have options :
'plugins' => [
'default' => [
'basic_blocks' => true,
'bootstrap4_blocks' => false,
'image_editor' => true,
'custom_fonts' => [],
'templates' => true,
],
'custom' => [
I tried to modify them , but no settings visible anyway.
Thanks!
Hi! Thanks for creating this package!
Can you please share some instructions how to add plugins like https://github.com/artf/grapesjs-plugin-forms to the config?
Is this possible?
Kind regards,
Johan.
Hi JD,
I'm trying to use grapesjs-tailwind module, which adds all blocks from here: https://tailblocks.cc/. They all using Tailwind classes, some of which contains "/" symbol, like this: lg:w-1/3. Problem is what grapesJS with default selectorManager settings changes "/" to "-" and these tailwind classes doesn't work. So it is need to add the function like this:
escapeName = (name) =>
`${name}`.trim().replace(/([^a-z0-9\w-:/]+)/gi, "-")
to the selectorManager option. You can see the example there: https://codepen.io/ju99ernaut/pen/BaKGadb
If you remove string "selectorManager: {escapeName}," from the editor initialization code, all the blocks which using classes like "lg:w-1/3" will not work, example is Blogs -- any element with three columns.
So is it possible to pass somehow the js function "escapeName" to the editor config selectorManager section?
Here is some screenshots:
with custom selectorManager setting:
with default selectorManager setting:
Hi JD,
I've updated to the 3.2.5, and after that, as i noticed, the config file format was changed. When i'm adding the grapesjs-tailwind module to the 'custom' section like this:
'grapesjs-tailwind' => 'https://unpkg.com/grapesjs-tailwind',
all styles doesn't work. The same if i adding it with the 'advanced' way.
Also it is error in console:
editor.js:2 Uncaught TypeError: Cannot read properties of null (reading 'getOptions')
at i.<anonymous> (editor.js:2:9462)
at y (editor.js:2:159143)
at m (editor.js:2:158935)
at d (editor.js:2:156888)
at u.trigger (editor.js:2:158828)
at editor.js:2:1027117
on the 3.2.3 it working fine, but I need the latest version
Hi,
how can i access the Blockmanager, to add Blocks after editor is loaded.
Maybe this way:
blockManager.add('1_row', { label: ' <i class="fas fa-window-maximize"></i> Zeile', // attributes: { class: 'total' }, category: { label: 'Struktur', open: false, order: 5, }, content: { tagName: 'div', name: 'Zeile', draggable: true, unstylable: ['font-family'], attributes: { 'class': 'row', 'data-gjs-droppable' : '.row-cell' }, components: [ { tagName: 'div', name: 'Spalte', attributes: { 'class': 'row-cell', 'data-gjs-draggable' : '.row' }, content: '' }, ] } });
Where is the blockmanager defined?
or where can i define it?
Thanks
hello , Thanks for taking the time to build this package
i create a placeholder and I copied the code in a block work fine , but i have question . Is there a way show preview of preloader instance shorcode in editor ? In order for the user to become more familiar with the content of the block content on the site
Hello!
There is a bug (?) when I added some background-image to the 'body' element it saves, but if I refresh the editor the body style is cleared and there is no background-image property in the code.
For some reasons it is important to add the picture to the body background in my case. Please advice is it possible to fix this?
Hi I'm using your package and it is working nice.
But You are using the older version of Grapesjs that uses "display: table" to design rows and cells. // 0.18.4
I want to use the latest version of Grapesjs that supports flex box to design. // 0.19.5
How can I use the latest version of Grapesjs in your package?
I've noticed after latest update the editor saves images in base64 encoding, and with some images i can't to save the page because request is too long. Is it possible to get back uploading to the laravel's storage?
Hi JD,
Currently when i'm trying to add standard image element and upload image, it opens file upload dialog, but after I choose file, nothing happens.
Here is my 'assets' block in the config/laravel-grapesjs.php:
'assets' => [
'disk' => 'public', //Default: local
'path' => 'images/media', //Default: 'laravel-grapesjs/media',
'upload_url' => null
],
What do i need to do to get the upload images functionality working properly?
Hi,
I'm using vagrant on the local machine and different site name than 'localhost'. And when i uploading images on the editor, it cannot get them with following message in console:
GET http://localhost/storage/laravel-grapesjs/media/355-600x350.jpg net::ERR_CONNECTION_REFUSED
How can i change the host name from localhost to the correct site url?
Hello JD,
Is it possible to use Google Storage to uploading and storing the images from the editor? With something like this connector https://github.com/Superbalist/laravel-google-cloud-storage
Immediately after install:
SQLSTATE[42S02]: Base table or view not found: 1146 Table 'aec53a.media' doesn't exist (SQL: select * from media)
Great job, looking forward to implementing this!
Hi,
Thank you for the package. I'm trying to use your package on my project... everything seems to work fine except when I try to upload an image, it shows "CSRF token mismatch". How do I attach CSRF token when uploading images?
Thank you.
Seong
What type and length should be the 'gjs_data' column in the migration?
"name": "jd-dotlogics/laravel- "version": "3.4.0"
i tried too many things but nothing .
please help
demo : https://youtu.be/Tu6xBx4i3dc
please tell me how to remove iframe component if u can .
Hello. I have a problem. Image not save in storage, and converts it to base64, and does not save it anywhere. How can I fix this?
https://prnt.sc/fCNNgc9MuwGa
Laravel 8.0
Hello,
I'm trying to log the changes of the pages, including changes of html made with gjs editor, but it is a problem with the fact that the editor doesn't determine the user who made the changes and saved the page. Is it possible to determine the user, maybe i can pass the current user in the editor view or something like this? (I'm using altek/accountant if it is important)
Thanks for the great product.
After page load, I have GET http://foo.test/laravel-grapesjs/App-Models-Content/1/templates 500 (Internal Server Error) in the JS console.
Then when clicking the Save Icon, I have 401 Unauthorized.
https://imgur.com/a/nO8gAAL
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.