@ -92,7 +92,7 @@ As you see the editor attaches a unique ID to all components with scripts and re
Read carefully
:::
Keep in mind that all component scripts are executed 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. those load along with the editor) are not there (you'll see later how to manage scripted components with dependencies).
Keep in mind that all component scripts are executed 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. those you're loading along with the editor) are not there (you'll see later how to manage components with dependencies).
That means **you can't use stuff outside of the function scope**. Take a look at this scenario:
@ -173,30 +173,34 @@ Now, if you try to change traits, you'll also see how the script will be trigger
## Dependencies
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.
As we mentioned above, scripts are executed independently inside the canvas, without any dependencies, 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 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.
The component related approach is definitely the best one, as the dependencies will be loaded dynamically and printed in the final HTML only when the component exists in the canvas.
All you have to do is to load your dependencies before executing your initialization script.
```js
...
script: function () {
var el = this;
var initMySLider = function() {
CoolSliderJS.init(el);
}
const script = function(props) {
const initLib = function() {
const el = this;
const myLibOpts = {
prop1: props.myprop1,
prop2: props.myprop2,
};
someExtLib(el, myLibOpts);
};
if (typeof CoolSliderJS == 'undefined') {
var script = document.createElement('script');
script.onload = initMySLider;
script.src = 'https://.../coolslider.min.js';
if (typeof someExtLib == 'undefined') {
const script = document.createElement('script');
script.onload = initLib;
script.src = 'https://.../somelib.min.js';
document.body.appendChild(script);
} else {
initLib();
}
},
...
};
```
### Template related
@ -204,31 +208,17 @@ script: function () {
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:
Keep in mind that the editor won't render those dependencies in the exported HTML (eg. via `editor.getHtml()`), so it's up to you how to include them in the final page where the final HTML is rendered.
Artur Arseniev
5 years ago