JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › smart-editor onToobarItemClick event
- This topic has 8 replies, 2 voices, and was last updated 1 year, 7 months ago by
jqwidgetsdev.
-
AuthorPosts
-
January 8, 2023 at 6:46 pm #104171
jqwidgetsdev
ParticipantHi,
Can you show me how to add an onclick event to a specific toolbarItem?
Thanks.
January 9, 2023 at 12:09 pm #104179svetoslav_borislavov
ParticipantHi,
You can use the toobarItemClick event.
The event contains a detail property.
This ‘detail’ property stores information about the toolbar item that was clicked in .value property:ev: CustomEvent
ev.detail: Object
ev.detail.originalEvent – The original click event
ev.detail.value – the name of the toolbar item that was clickedIf you have any other questions, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/January 22, 2023 at 2:03 pm #104264jqwidgetsdev
ParticipantHi,
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>
January 23, 2023 at 7:39 am #104270svetoslav_borislavov
ParticipantHi,
The toolbar item click event is an event of the editor. You should add an event handler to the smart editor.
It is expected that you receive an empty array because when the component mounts the smart editor has not been initialized yet.See the console when you click a toolbar item here: https://codepen.io/svetoslavb04/pen/BaPYmKZ
If you have any additional questions, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/January 23, 2023 at 7:36 pm #104276jqwidgetsdev
ParticipantHi Svetoslav,
Weird, I have used your suggestion, but the event still doesn’t get fired.
Also is there a typo in the event name?
toobarItemClick vs toolbarItemClickHere is my code
<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 editor = document.getElementById('editor'); console.log(editor); //editor.expandToolbar(); editor.addEventListener('toobarItemClick', (event) => { const detail = event.detail; // const value = detail.value; console.log(detail) }) }); window.onload = function () { } </script> <style> html, body { width: 100%; height: 100%; margin: 0 auto; } .smart-editor { width: 100%; height: 100%; } @media (max-width: 750px) { .smart-editor { width: 100%; } } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; right: 0; top: 0; bottom: 0; width: 260px; } @media (max-width: 750px) { .options { position: relative; top: 30px; width: 240px; margin: 0 auto; } } #app, .vue-root { width: 100%; height: 100%; } </style>
Any suggestions? Thanks in advance.
January 24, 2023 at 6:34 am #104280svetoslav_borislavov
ParticipantHi,
As it is a custom toolbar item you should add the event manually.
Your custom toolbar item object should look like this:{
name: “settings”,
width: “auto”,
template: (element) => {
element.textContent = “settings”;
element.addEventListener(“click”, () => {
console.log(“click”);
});
},
}Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/-
This reply was modified 1 year, 7 months ago by
svetoslav_borislavov.
January 24, 2023 at 11:44 am #104285jqwidgetsdev
ParticipantHi Svetoslav,
Ok, I see what you are doing, the event is of course firing now.
My example was indeed simple text, but what if the element value is HTML? Which element method should I then be using?{ name: "settings", width: "auto", template: (element) => { console.log(element); element.<strong>innerHTML</strong> = <code><smart-button><i class='fa fa-cog' aria-hidden='true' title='Settings'></i></smart-button></code>; element.addEventListener("click", () => { console.log("click"); }); }, },
Thanks.
January 25, 2023 at 5:44 am #104298svetoslav_borislavov
ParticipantHi,
You can set the event listener to the element as you did.
If you want to append children you can use the appendChild method.Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/January 25, 2023 at 11:18 am #104299jqwidgetsdev
ParticipantHi Svetoslav,’
Thanks, yes your suggestion works like a charm.
Best regards.
-
This reply was modified 1 year, 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.