JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › smart-editor onToobarItemClick event › Reply To: smart-editor onToobarItemClick event
January 22, 2023 at 2:03 pm
#104264
Participant
Hi,
Yes I have seen the documentation. However, when I try this myself, console.log(editorItems); // returns []
Any pointers as to what I am doing wrong?
<template>
<div class="vue-root">
<smart-editor id="editor"></smart-editor>
</div>
</template>
<script setup>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.editor.js";
window.Smart(
"#editor",
class {
get properties() {
return {
//Properties
toolbarItems: [
{
name: "settings",
width: "auto",
template: "settings"
}
]
};
}
}
);
onMounted(() => {
const editorItems = Array.from(document.querySelectorAll('smart-editor-toolbar-item'));
console.log(editorItems); // returns []
editorItems.forEach(item => {
console.log(item);
item.addEventListener('toolbarItemClick', (event) => {
const detail = event.detail,
// originalEvent = detail.originalEvent,
value = detail.value;
console.log(value);
})
})
});
</script>