Skip to content
You don't have a token yet? Contact Sales

Usage

Once you have successfully installed the package, a web component will be available to use the nuEvolution Editor. By default, it will be available under the name nu-evolution-editor and you can use it as you would with any other html element.

Define in HTML files

Place the <nu-evolution-editor> element where you want it to appear in your page. To use it in your script later, make sure it has an unique identifier (e.g. an ID).

template-file.html
html
    <!-- your other source code -->
<div>
    <nu-evolution-editor token="<your-access-token>" id="evo"></nu-evolution-editor>
</div>

To access it in your script, you can use any selector you want.

your-script.js
js
const editor = document.getElementById('evo')
// ...

WARNING

If you are importing the package via CDN, it might be necessary to await the web component to be defined in case your script is loaded and executed before the package script.

your-script.js
js
customElements.whenDefined('nu-evolution-editor').then(() => {
    const editor = document.getElementById('evo')
    /// ...
})

Create element in script

If you want to dynamically create the editor, you can use document.createElement to create a new instance of the editor.

your-script.js
js
const editor = document.createElement('nu-evolution-editor')
editor.token = '<your-access-token>'

document.querySelector('<selector to your target element>').appendChild(editor)

Usage with Typescript

WARNING

If you want to use the editor with Typescript, you have to install the package via a package manager to get the type definitions.

your-script.ts
ts
// Keep this import! Typescript will erase the type import when transpiling
import '@nuitdev/evo-embedded'
import type {NuEvolutionEditor} from '@nuitdev/evo-embedded'

const editor = document.querySelector<NuEvolutionEditor>('#evo')

The custom element is added to the HTMLElementTagNameMap by the package, so if you want to use document.createElement, you don't need to manually specify the type.

Example


You don't have a token yet? Contact Sales