smart-editor onToobarItemClick event

[jqwidgetsdev]

Hi,

Can you show me how to add an onclick event to a specific toolbarItem?

Thanks.

[svetoslav_borislavov]

Hi,

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 clicked

If you have any other questions, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[jqwidgetsdev]

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>

[svetoslav_borislavov]

Hi,

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 Borislavov

Smart UI Team
https://www.htmlelements.com/

[jqwidgetsdev]

Hi 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 toolbarItemClick

Here 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.

[svetoslav_borislavov]

Hi,

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 Borislavov

Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 1 month ago by svetoslav_borislavov.

[jqwidgetsdev]

Hi 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.

[svetoslav_borislavov]

Hi,

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 Borislavov

Smart UI Team
https://www.htmlelements.com/

[jqwidgetsdev]

Hi Svetoslav,’

Thanks, yes your suggestion works like a charm.

Best regards.

[Author]

Posts