Issue #2635Opened March 10, 2020by micker2 reactions
Load external css in editor
Question
hello i search a lot but i didn't find how to load a css file inside editor My code regards of other issue i add styles: ['http://localhost/flexidev/templates/shaper_helix3/css/template.css'] no real error but no style ... what i forgot ? `function fclayout_init_builder(editor_sfx, element_id) { /**
Code SnippetTEXT
* Lets say, for instance, you start with your already defined HTML template
* and you\'d like to import it on fly for the user
*/
var LandingPage = {
html: \'<h2>This is the layout area, you may drag and drop to add your blocks here, to load flexicontent field use data panel to insert flexicontent block</h2>\',
css: null,
components: null,
styles: [\'http://localhost/flexidev/templates/shaper_helix3/css/template.css\'],
};
var lp = \'./img/\';
var plp = \'//placehold.it/350x250/\';
var images = [
lp+\'flexicontent.png\',
lp+\'grapesjs-logo-cl.png\'
];
var editor = grapesjs.init({
avoidInlineStyle: false,
// dragMode: \'absolute\',
// Indicate where to init the editor. You can also pass an HTMLElement
// Size of the editor
height: \'100%\',
container: \'#gjs_\' + editor_sfx,
// We use `fromElement` or `components` to get the HTML
// `components` accepts an HTML string or a JSON string of components
// Here, at first, we check and use components if are already defined
// otherwise the HTML string gonna be used
fromElement: 0,
components: LandingPage.components || LandingPage.html,
// We might want to make the same check for styles
style: LandingPage.style || LandingPage.css,
protectedCss: \'\',`Answers (3)
pouyamiralayi• March 10, 20201 reactions
@micker you must include them like this:
canvas: {
styles: ['bundle1.css', 'bundle2.css'],
scripts: ['bundle1.js', 'bundle2.js'],
},
I do not see the canvas object in your setup.
Cheers!
pouyamiralayi• March 12, 20201 reactions
@micker if your customCss is a url, that's the way to include it. but if you you have some styles that you want to include by hand, here is the procedure:
editor.addComponents(
`
<style> div { background: teal} </style>
`
)
Cheers!
micker• March 10, 20200 reactions
i try to use https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates but i not sure about this ... if i add canvas like this
canvas: {
scripts: null,
styles: [customeCss] //Is there any way to do so.
}
avoidInlineStyle: false,
// dragMode: \'absolute\',
// Indicate where to init the editor. You can also pass an HTMLElement
// Size of the editor
height: \'100%\',
container: \'#gjs_\' + editor_sfx,
// We use `fromElement` or `components` to get the HTML
// `components` accepts an HTML string or a JSON string of components
// Here, at first, we check and use components if are already defined
// otherwise the HTML string gonna be used
fromElement: 0,
components: LandingPage.components || LandingPage.html,
// We might want to make the same check for styles
style: LandingPage.style || LandingPage.css,
protectedCss: \'\',
showOffsets: 1,
assetManager: {
embedAsBase64: 1,
assets: images
},
styleManager: { clearProperties: 1 },
plugins: [
\'gjs-preset-webpage\',
\'grapesjs-lory-slider\',
\'grapesjs-tabs\',
\'grapesjs-custom-code\',
\'grapesjs-touch\',
\'grapesjs-parser-postcss\',
\'grapesjs-tooltip\',
],
pluginsOpts: {
\'grapesjs-tooltip\': {
sliderBlock: {
category: \'Extra\'
}
},
\'grapesjs-lory-slider\': {
sliderBlock: {
category: \'Extra\'
}
},
\'grapesjs-tabs\': {
tabsBlock: {
category: \'Extra\'
}
},
\'gjs-preset-webpage\': {
modalImportTitle: \'Import Template\',
modalImportLabel: \'<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>\',
modalImportContent: function(editor)
{
//\'<script>\n\' + document.querySelector(\'#\' + element_id + \'_js\').textContent.trim() + \'\n<\/script>\n\'
return document.querySelector(\'#\' + element_id + \'_html\').textContent.trim() + \'\n\' +
\'<style>\n\' + document.querySelector(\'#\' + element_id + \'_css\').textContent.trim() + \'\n<\/style>\n\';
},
filestackOpts: null, //{ key: \'AYmqZc2e8RLGLE7TGkX3Hz\' },
aviaryOpts: false,
blocksBasicOpts: { flexGrid: 1 },
customStyleManager: [{
name: \'General\',
buildProps: [\'float\', \'display\', \'position\', \'top\', \'right\', \'left\', \'bottom\'],
properties:[{
name: \'Alignment\',
property: \'float\',
type: \'radio\',
defaults: \'none\',
list: [
{ value: \'none\', className: \'fa fa-times\'},
{ value: \'left\', className: \'fa fa-align-left\'},
{ value: \'right\', className: \'fa fa-align-right\'}
],
},
{ property: \'position\', type: \'select\'}
],
},{
name: \'Dimension\',
open: false,
buildProps: [\'width\', \'flex-width\', \'height\', \'max-width\', \'min-height\', \'margin\', \'padding\'],
properties: [{
id: \'flex-width\',
type: \'integer\',
name: \'Width\',
units: [\'px\', \'%\'],
property: \'flex-basis\',
toRequire: 1,
},{
property: \'margin\',
properties:[
{ name: \'Top\', property: \'margin-top\'},
{ name: \'Right\', property: \'margin-right\'},
{ name: \'Bottom\', property: \'margin-bottom\'},
{ name: \'Left\', property: \'margin-left\'}
],
},{
property : \'padding\',
properties:[
{ name: \'Top\', property: \'padding-top\'},
{ name: \'Right\', property: \'padding-right\'},
{ name: \'Bottom\', property: \'padding-bottom\'},
{ name: \'Left\', property: \'padding-left\'}
],
}],
},{
name: \'Typography\',
open: false,
buildProps: [\'font-family\', \'font-size\', \'font-weight\', \'letter-spacing\', \'color\', \'line-height\', \'text-align\', \'text-decoration\', \'text-shadow\'],
properties:[
{ name: \'Font\', property: \'font-family\'},
{ name: \'Weight\', property: \'font-weight\'},
{ name: \'Font color\', property: \'color\'},
{
property: \'text-align\',
type: \'radio\',
defaults: \'left\',
list: [
{ value : \'left\', name : \'Left\', className: \'fa fa-align-left\'},
{ value : \'center\', name : \'Center\', className: \'fa fa-align-center\' },
{ value : \'right\', name : \'Right\', className: \'fa fa-align-right\'},
{ value : \'justify\', name : \'Justify\', className: \'fa fa-align-justify\'}
],
},{
property: \'text-decoration\',
type: \'radio\',
defaults: \'none\',
list: [
{ value: \'none\', name: \'None\', className: \'fa fa-times\'},
{ value: \'underline\', name: \'underline\', className: \'fa fa-underline\' },
{ value: \'line-through\', name: \'Line-through\', className: \'fa fa-strikethrough\'}
],
},{
property: \'text-shadow\',
properties: [
{ name: \'X position\', property: \'text-shadow-h\'},
{ name: \'Y position\', property: \'text-shadow-v\'},
{ name: \'Blur\', property: \'text-shadow-blur\'},
{ name: \'Color\', property: \'text-shadow-color\'}
],
}],
},{
name: \'Decorations\',
open: false,
buildProps: [\'opacity\', \'background-color\', \'border-radius\', \'border\', \'box-shadow\', \'background\'],
properties: [{
type: \'slider\',
property: \'opacity\',
defaults: 1,
step: 0.01,
max: 1,
min:0,
},{
property: \'border-radius\',
properties : [
{ name: \'Top\', property: \'border-top-left-radius\'},
{ name: \'Right\', property: \'border-top-right-radius\'},
{ name: \'Bottom\', property: \'border-bottom-left-radius\'},
{ name: \'Left\', property: \'border-bottom-right-radius\'}
],
},{
property: \'box-shadow\',
properties: [
{ name: \'X position\', property: \'box-shadow-h\'},
{ name: \'Y position\', property: \'box-shadow-v\'},
{ name: \'Blur\', property: \'box-shadow-blur\'},
{ name: \'Spread\', property: \'box-shadow-spread\'},
{ name: \'Color\', property: \'box-shadow-color\'},
{ name: \'Shadow type\', property: \'box-shadow-type\'}
],
},{
property: \'background\',
properties: [
{ name: \'Image\', property: \'background-image\'},
{ name: \'Repeat\', property: \'background-repeat\'},
{ name: \'Position\', property: \'background-position\'},
{ name: \'Attachment\', property: \'background-attachment\'},
{ name: \'Size\', property: \'background-size\'}
],
},],
},{
name: \'Extra\',
open: false,
buildProps: [\'transition\', \'perspective\', \'transform\'],
properties: [{
property: \'transition\',
properties:[
{ name: \'Property\', property: \'transition-property\'},
{ name: \'Duration\', property: \'transition-duration\'},
{ name: \'Easing\', property: \'transition-timing-function\'}
],
},{
property: \'transform\',
properties:[
{ name: \'Rotate X\', property: \'transform-rotate-x\'},
{ name: \'Rotate Y\', property: \'transform-rotate-y\'},
{ name: \'Rotate Z\', property: \'transform-rotate-z\'},
{ name: \'Scale X\', property: \'transform-scale-x\'},
{ name: \'Scale Y\', property: \'transform-scale-y\'},
{ name: \'Scale Z\', property: \'transform-scale-z\'}
],
}]
},{
name: \'Flex\',
open: false,
properties: [{
name: \'Flex Container\',
property: \'display\',
type: \'select\',
defaults: \'block\',
list: [
{ value: \'block\', name: \'Disable\'},
{ value: \'flex\', name: \'Enable\'}
],
},{
name: \'Flex Parent\',
property: \'label-parent-flex\',
type: \'integer\',
},{
name : \'Direction\',
property : \'flex-direction\',
type : \'radio\',
defaults : \'row\',
list : [{
value : \'row\',
name : \'Row\',
className : \'icons-flex icon-dir-row\',
title : \'Row\',
},{
value : \'row-reverse\',
name : \'Row reverse\',
className : \'icons-flex icon-dir-row-rev\',
title : \'Row reverse\',
},{
value : \'column\',
name : \'Column\',
title : \'Column\',
className : \'icons-flex icon-dir-col\',
},{
value : \'column-reverse\',
name : \'Column reverse\',
title : \'Column reverse\',
className : \'icons-flex icon-dir-col-rev\',
}],
},{
name : \'Justify\',
property : \'justify-content\',
type : \'radio\',
defaults : \'flex-start\',
list : [{
value : \'flex-start\',
className : \'icons-flex icon-just-start\',
title : \'Start\',
},{
value : \'flex-end\',
title : \'End\',
className : \'icons-flex icon-just-end\',
},{
value : \'space-between\',
title : \'Space between\',
className : \'icons-flex icon-just-sp-bet\',
},{
value : \'space-around\',
title : \'Space around\',
className : \'icons-flex icon-just-sp-ar\',
},{
value : \'center\',
title : \'Center\',
className : \'icons-flex icon-just-sp-cent\',
}],
},{
name : \'Align\',
property : \'align-items\',
type : \'radio\',
defaults : \'center\',
list : [{
value : \'flex-start\',
title : \'Start\',
className : \'icons-flex icon-al-start\',
},{
value : \'flex-end\',
title : \'End\',
className : \'icons-flex icon-al-end\',
},{
value : \'stretch\',
title : \'Stretch\',
className : \'icons-flex icon-al-str\',
},{
value : \'center\',
title : \'Center\',
className : \'icons-flex icon-al-center\',
}],
},{
name: \'Flex Children\',
property: \'label-parent-flex\',
type: \'integer\',
},{
name: \'Order\',
property: \'order\',
type: \'integer\',
defaults : 0,
min: 0
},{
name : \'Flex\',
property : \'flex\',
type : \'composite\',
properties : [{
name: \'Grow\',
property: \'flex-grow\',
type: \'integer\',
defaults : 0,
min: 0
},{
name: \'Shrink\',
property: \'flex-shrink\',
type: \'integer\',
defaults : 0,
min: 0
},{
name: \'Basis\',
property: \'flex-basis\',
type: \'integer\',
units: [\'px\',\'%\',\'\'],
unit: \'\',
defaults : \'auto\',
}],
},{
name : \'Align\',
property : \'align-self\',
type : \'radio\',
defaults : \'auto\',
list : [{
value : \'auto\',
name : \'Auto\',
},{
value : \'flex-start\',
title : \'Start\',
className : \'icons-flex icon-al-start\',
},{
value : \'flex-end\',
title : \'End\',
className : \'icons-flex icon-al-end\',
},{
value : \'stretch\',
title : \'Stretch\',
className : \'icons-flex icon-al-str\',
},{
value : \'center\',
title : \'Center\',
className : \'icons-flex icon-al-center\',
}],
}]
}
],
},
},
// Disable the storage manager for the moment
storageManager: {
id: \'fc-gjs-\' + editor_sfx, // Prefix identifier that will be used inside storing and loading
type: \'form-storage\', // Type of the storage: local, remote, ... custom: SimpleStorage
//type: \'remote\',
//urlStore: \'http://localhost/endpoint_store\',
//urlLoad: \'http://localhost/endpoint_load\',
stepsBeforeSave: 1,
storeComponents: true, // Enable/Disable storing of components in JSON format
storeStyles: true, // Enable/Disable storing of rules in JSON format
storeHtml: true, // Enable/Disable storing of components as HTML string
storeCss: true, // Enable/Disable storing of rules as CSS string
params: {}, // Custom parameters to pass with the remote storage request, eg. CSRF token
headers: {}, // Custom headers for the remote storage request
autosave: true, // Whether to store data automatically
autoload: true, // Whether to auto-load stored data on init
},
// Block manager, define the available blocks to drag and drop into the layout area
/*blockManager: {
//appendTo: \'#gjs_\' + editor_sfx + \' #blocks\',
//blocks: []
},*/
// We define a default panel as a sidebar to contain layers
//panels: {
//defaults: []
//},
/**
* The Selector Manager allows to assign classes and different states (eg. :hover) on components.
* Generally, it\'s used in conjunction with Style Manager but it\'s not mandatory
*/
/*selectorManager: {
appendTo: \'#gjs_\' + editor_sfx + \' .styles-container\'
},*/
/*styleManager: {
appendTo: \'#gjs_\' + editor_sfx + \' .styles-container\'
},*/
/*layerManager: {
appendTo:\'#gjs_\' + editor_sfx + \' .layers-container\'
},*/
/*traitManager: {
appendTo: \'#gjs_\' + editor_sfx + \' .traits-container\',
},*/
// Device manager: Desktop, Tablet, Mobile
mediaCondition: \'min-width\', // default is `max-width`
deviceManager: {
devices: [{
title: \'Mobiles in Portrait Mode\',
name: \'Mobile Portrait\',
height: \'568px\', // this value will be used on canvas width
heightMedia: \'768px\', // this value will be used in CSS @media
width: \'320px\', // this value will be used on canvas width
widthMedia: \'480px\', // this value will be used in CSS @media
}, {
title: \'Mobiles in Landscape Mode\',
name: \'Mobile Landscape\',
height: \'320px\', // this value will be used on canvas height
heightMedia: \'480px\', // this value will be used in CSS @media
width: \'568px\', // this value will be used on canvas width
widthMedia: \'768px\', // this value will be used in CSS @media
}, {
title: \'Tablets, (and Large Mobiles in Landscapes mode)\',
name: \'Tablet\',
width: \'768px\', // this value will be used on canvas width
widthMedia: \'992px\', // this value will be used in CSS @media
}, {
name: \'Desktop\',
width: \'\', // this value will be used on canvas width
widthMedia: \'\',
}]
},
});```
i have this error
```Uncaught ReferenceError: fclayout_init_builder is not defined
at HTMLSpanElement.onclick (index.php?option=com_modules&view=module&layout=edit&id=95:5782)```
seams doesn't link
``canvas: {
scripts: null,
styles: [\'http://localhost/flexidev/templates/shaper_helix3/css/template.css\'] //Is there any way to do so.
}```
and in same page
```var LandingPage = {
html: \'<h2>This is the layout area, you may drag and drop to add your blocks here, to load flexicontent field use data panel to insert flexicontent block</h2>\',
css: null,
components: null,
style: null,
};```
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2416
Unable to display template from database to grapesjs
Able to fetch my remote HTML file using load URL and getting status ok, how can I load this fetched HTML AND CSS into editor? currently I'm...
3 answersUpdated November 17, 2019
Issue #425
How to render external js file in our custom plugins
Hello, I am creating a slider plugins but its not working. because. I am not able to find how i can add or use external scripts and css fil...
3 answersUpdated September 18, 2019
Issue #2261
load local html file into grapesjs
hello i am pretty new to grapejs i want to load a local html file in the assets folder into grapesjs editor ,pls tellme how i can load loca...
3 answersUpdated February 14, 2023
Issue #1764
How to use CKEditor/TinyMC editor instead of RichTextEditor inside GrapesJs
I need to add text styles and other text options so how to add CKEditor/TinyMC editor instead of RichTextEditor inside GrapesJs.
3 answersUpdated August 3, 2021
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.