How do I add custom toolbar actions in jqxEditor that insert predefined template

[sandeParticipant]

Hi everyone, I am working on an internal admin dashboard with Editor.

I am currently trying to solve this: How do I add custom toolbar actions in jqxEditor that insert predefined templates and still preserve undo/redo history?

So far, I already checked the docs and basic examples, but the UI behaves inconsistently after data updates.

Has anyone solved this in production?

[adminKeymaster]

Hi,

Below is a function which adds custom toolbar actions to the editor.
The code uses document.execCommand(“insertHTML”) – keeps undo/redo intact in jqxEditor

function insertTemplate(editor, html) {
  if (!editor) return;

  editor.focus();

  // Ensure there is an active selection range (required for execCommand consistency)
  const sel = window.getSelection();
  if (!sel || !sel.rangeCount) {
    // fallback: try placing cursor at end
    const range = document.createRange();
    range.selectNodeContents(editor[0] || editor);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
  }

  // IMPORTANT: jqxEditor is contenteditable-based → use execCommand for atomic undo step
  document.execCommand("insertHTML", false, html);
}

// Example jqxEditor toolbar configuration
$("#editor").jqxEditor({
  height: "400px",
  tools: "bold italic underline | insertTemplate"
});

// Add custom toolbar button
$("#editor").on("initialized", function () {
  const editor = $("#editor");

  // jqxEditor toolbar is not formally extensible, so we inject a custom button
  const toolbar = editor.find(".jqx-editor-toolbar");

  const btn = $('<button type="button">Insert Template</button>');

  btn.on("click", function () {
    insertTemplate(editor, 

New Section

Start writing here…

`);
});

toolbar.append(btn);
});`

Regards,
Peter

[Author]

Posts