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>

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.

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.

Hi Svetoslav,’

Thanks, yes your suggestion works like a charm.

Best regards.