Closed insssomniac closed 2 years ago
Hi @insssomniac,
Create a new js file (e.g. public/vendor/laravel-grapesjs/assets/modify-config.js) and paste the code below into it.
(function(w){
try{
if(w.editorConfig){
let selectorManager = (editorConfig.selectorManager = editorConfig.selectorManager || {});
selectorManager.escapeName = (name) => `${name}`.trim().replace(/([^a-z0-9\w-:/]+)/gi, "-")
}
}catch(e){}
})(window)
Now load this js file before the editor.js via config file laravel-grapesjs.php
/*
|--------------------------------------------------------------------------
| Global Scripts
|--------------------------------------------------------------------------
|
| Global scripts for the editor blade file.
*/
'scripts' => [
'vendor/laravel-grapesjs/assets/modify-config.js'
'vendor/laravel-grapesjs/assets/editor.js'
],
And your problem should be resolved.
Note: load modify-config.js before editor.js
Wow, it is really cool! Thanks a lot! With such "open config" approach the laravel-grapesjs plugin is really flexible.
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:
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:![image](https://user-images.githubusercontent.com/42058438/169488601-275a2131-2b64-4d1a-8673-f16a79dd31e5.png)
with default selectorManager setting:![image](https://user-images.githubusercontent.com/42058438/169488962-6a74afe2-5ec8-4e70-8236-769d2818714c.png)