DEV Community

loading...

Create a custom button in Jodit editor

artydev profile image artydev ・1 min read

Alt Text

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();

Enter fullscreen mode Exit fullscreen mode

You can test it here : Jodit

Discussion (0)

pic
Editor guide