Integrating the Stripo editor into your application is a simple process that involves a few key steps. Below is a guide to help you get started.
Preparing the editor space:
Determine where the editor will be placed in the HTML structure of your application. Use a container with a unique identifier for this purpose. For example:
<div id="stripoEditorContainer"></div>
2. Adding the Editor Script:
Next, you'll need to add a <script> tag to your application to load the Stripo editor code. You have the option to load the latest version of the editor or a specific version if required:
To load the latest version:
<script
id="UiEditorScript"
type="module"
src="https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js"
></script>
To load a specific version:
<script
id="UiEditorScript"
type="module"
src="https://plugins.stripo.email/resources/uieditor/rev/[version]/UIEditor.js"
></script>
To view the available versions of the Stripo Plugin, refer to the Release Notes and ensure you're checking the correct versions for the new plugin.
If you wish to host the front-end part of the editor on your server to improve loading times, please note that this is possible under any pricing plan. Follow this guide to learn how to host the front-end assets of the editor on your CDN.
Initializing the Editor:
After including the script, you can initialize the Stripo editor using JavaScript. You'll need to specify the container where the editor will be displayed and configure the editor settings.
const domContainer = document.querySelector('#stripoEditorContainer');
const stripoConfig = {...};
window.UIEditor.initEditor(domContainer, stripoConfig);
To initialise the editor inside an existing Angular application, you need to wrap the init method, as in the example:
constructor(
private readonly zone: NgZone // provide NgZone
) {}
ngOnInit(): void {
//... YOUR CODE HERE
// wrap Editor initialisation
this.zone.runOutsideAngular(() => {
const domContainer = document.querySelector('#stripoEditorContainer');
const stripoConfig = {...};
window.UIEditor.initEditor(domContainer, stripoConfig);
});
//... YOUR CODE HERE
}
You can find a complete list of supported parameters in the Initialization Settings section of the documentation.
Once the initEditor the function is called, the editor will be displayed in the specified container on your webpage.
Please be advised that you can control the default position of the Settings panel and Blocks and Modules panel by passing panelPosition parameter while plugin initialization. It may have two possible states:
"BLOCKS_SETTINGS" — blocks and modules panel on the left, settings panel on the right;
"SETTINGS_BLOCKS" — settings panel on the left, blocks and modules panel on the right
This setup allows you to integrate the Stripo New Plugin smoothly into your application's UI, providing users with a robust email editing tool.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.