Reply To: smart-editor onToobarItemClick event

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