Create a custom button in Jodit editor

Jodit allows to insert buttons on the toolbar, but what if you want more customisation ?.

Take a look at this example :

let helloButton = {
  text: "helloButton"
}

let toolbarButtons = [
  helloButton, 'link'
]



let createHelloButton = function () {
  let toolbar = document.querySelector(".jodit-toolbar-editor-collection .jodit-ui-group");
  let allButtons = 
    Array
      .from(toolbar.childNodes)
      .map( n => Array.from(n.children)[0]);
  let foundButton = allButtons.find( b => b.computedName == "helloButton");
  let newButton = document.createElement("button");
  newButton.classList.add("jodit-toolbar-button__button");
  newButton.innerHTML = "<span>🧙 <em>Hello</em></span>";
  foundButton.replaceWith(newButton);
  newButton.addEventListener("click", () => editor.s.insertHTML("Hello 🧙"));
}

// eslint-disable-next-line no-unused-varfdsdfs
let editor = new Jodit("#editor", {
  buttons: toolbarButtons,
  buttonsMD: toolbarButtons,  
  buttonsSM: toolbarButtons,
  buttonsXS: toolbarButtons,
  enter: "div",
  language: "fr",
});


createHelloButton();

You can test it here : Jodit