In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)
In this guide you'll see how to attach component related scripts and deal with external JavaScript libraries (for stuff like counters, galleries, slideshows, etc.)
Now if you drag the new block inside the canvas you'll see an alert popup and the message in console, as you might expected.
One thing worth noting is that `this` context is binded to the component element, so, for example, if you want to change some property you'd do `this.innerHTML = 'inner content'`.
Now if you drag the new block inside the canvas you'll see an alert and the message in console, as you might expect.
One thing worth noting is that `this` context is bound to the component element, so if you wanted to change a property you'd do `this.innerHTML = 'inner content'`.
One thing you should take in account is how the script is binded to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or `editor.getHtml()`), you might see something like this:
One thing you should take in account is how the script is bound to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or `editor.getHtml()`), you might see something like this:
```html
<divid="c764"></div>
@ -66,7 +66,7 @@ As you see the editor attaches a unique ID to all components with scripts and re
</script>
```
Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), therefore are NOT part of the current `document` and all your external libraries (eg. JQuery) are not there, but you'll see further how to manage scripted components with dependencies.
Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), and therefore are NOT part of the current `document`. All your external libraries (eg. jQuery) are not there, but you'll see later how to manage scripted components with dependencies.
One thing you might be concerned about is a string used for the `script`, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this:
Unfortunately, this won't work as you'll get undefined `myVar` error. The final HTML, with script functions converted to string, will look like this:
Unfortunately, this won't work. You'll get an undefined `myVar` error. The final HTML, with script functions converted to string, will look like this:
```html
<divid="c764"></div>
@ -114,7 +114,7 @@ Unfortunately, this won't work as you'll get undefined `myVar` error. The final
</script>
```
There is actually a solution to make your scripts behave dynamically, you can interpolate properties of the component model.
There is a solution to make your scripts behave dynamically. You can interpolate properties of the component model.
```js
editor.BlockManager.add('test-block', {
@ -145,7 +145,7 @@ The final HTML will be:
</script>
```
You can even change tags used for the interpolation
You can even change the tags used for the interpolation
```js
var editor = grapesjs.init({
@ -157,20 +157,20 @@ var editor = grapesjs.init({
});
```
You can use this technique with [property Traits](https://github.com/artf/grapesjs/wiki/Traits#add-traits-to-components) to create highly customizable components.
You can use this technique with [property Traits](https://github.com/artf/grapesjs/wiki/Traits#add-traits-to-components) to create custom components.
## Dependencies
As we mentioned above, scripts are executed independently inside the iframe of the canvas, where you won't find any dependency, so exactly as the final HTML generated by the editor.
If you want to make use of external libraries you have basically 2 types of approaches, component related and template related.
As we mentioned above, scripts are executed independently inside the iframe of the canvas, without any dependencies, so exactly as the final HTML generated by the editor.
If you want to make use of external libraries you have two approaches: component-related and template-related.
### Component related
If you're building, for example, a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas, in this case, component related approaches is the perfect one as it's loading external libraries dynamically.
All you have to do is to require the dependency when is needed and then call your script.
If you're building a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas. In this case, the component-related approach is the perfect one as it's loading external libraries dynamically.
All you have to do is to require the dependency when it is needed and then call your script.
```js
...
@ -192,7 +192,7 @@ script: function () {
### Template related
Some dependency might be highly used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas:
A dependency might be used along all your components (eg. JQuery) so instead requiring it inside each script you might want to inject it directly inside the canvas:
```js
var editor = grapesjs.init({
@ -220,3 +220,4 @@ Examples of components using scripts inside
In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as *Settings* of each component. A common use of traits is to customize element attributes (eg. `placeholder` for inputs) and in this case the editor comes already with some built-in, easy configurable, types.
In GrapesJS, Traits can define different parameters and behaviors of a component. The user generally will see traits as the *Settings* of a component. A common use of traits is to customize element attributes (eg. `placeholder` for inputs) and in this case the editor comes already with some built-in, easy configurable, types.
[[toc]]
@ -23,11 +23,11 @@ In GrapesJS, Traits could define different parameters and behaviors of a single
## Add Traits to Components
You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:
You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:
<img:src="$withBase('/default-traits.png')">
In this case we gonna create a new Component ([check here](Components) for more details about the creation of new components) with a new set of traits
In this example we are going to create a new Component. ([Check here](Components) for more details about the creation of new components with a new set of traits
```js
var editor = grapesjs.init({...});
@ -75,7 +75,7 @@ Now the result will be
<img:src="$withBase('/input-custom-traits.png')">
By default, traits modify attributes of the model (which than reflected in canvas) but you can also have traits which change the property
Traits modify attributes of the model (which than reflected in canvas), but you can also have traits which change the property
```js
...
@ -88,7 +88,7 @@ traits: [{
...
```
In this way you're able to listen this changes and react with your own logic
In this way you're able to listen for changes and react with your own logic
jacobherrington
7 years ago