у установить значение элементов DOM стиля ввода (input/div contenteditable=true) довольно легко, либо установив их.value или жеinnerText свойства через JS.

Но возможно ли передать им события клавиатуры, загруженные символом, чтобы он вставлял отправленный символ в текущую позицию курсора?

Вот пример, который не работает.

'use strict'

const btn = document.querySelector('#btn')
const editable = document.querySelector('#editable')

btn.addEventListener('mousedown', e => {
  // prevent unfocus when clicking button
  e.preventDefault()
  
  const customEvt = new KeyboardEvent('keypress', {
    bubbles: true, 
    cancelable: true, 
    key: 'X', 
    char: 'X'
  })

  editable.dispatchEvent(customEvt)
})

#editable {
  border: 1px solid;
  padding: 8px 12px;
}

<p> Make sure the editable is focused before pressing button</p>
<div id="editable" contenteditable="true">Lorem Ipsum</div>
<button id="btn"> Add 'X' character at cursor position</button>

Зачем мне это нужно:

Мы создаем клавиатуру символов для приложения, которая позволит пользователям добавлять символы в текущую позицию курсора.

Отслеживание текущей позиции курсора вcontenteditable, таким образом, мы можем вставить кликаемый символ, он подвержен ошибкам и требует дополнительного (и часто некрасивого) кода. Я хотел бы избежать этого.

Я предполагаю, что это невозможно сделать, так как это может быть угрозой безопасности, но это никогда не повредит.