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).
<!-- 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.
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.
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.
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.
// 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.