Как выполнить программный ввод текста, который поддерживает как отмену, так и повтор? - PullRequest
0 голосов
/ 08 июня 2019

Мое текущее расширение Chrome должно программно вставлять текст при вводе пользователем.Это прекрасно работает, однако, оно исправляет поведение отмены / повтора всех текстовых редакторов, которые я пробовал до сих пор.Итак, следующая процедура:

  1. введите текст
  2. вставьте текст программно
  3. введите текст
  4. нажмите ctrl-z трижды

не всегда возвращается в пустое состояние.Очень часто он застревает где-то посередине.Его поведение в основном противоречиво.

Вот MCVE скрипта контента:

function init() {
  var $input = document.getElementsByTagName("textarea")[0];
  if (!$input) {
    console.log("No input element found.");
    return true;
  }
  var $btn = document.createElement("button");
  $btn.innerHTML = "Click";
  $btn.addEventListener("click", function() {
    var caretPos = $input.selectionStart;
    $input.value = $input.value.substring(0, caretPos) + " test string " + $input.value.substring(caretPos);
  });

  $input.parentElement.insertBefore($btn, $input);

  return true;
}
window.addEventListener("load", init);
<div><textarea></textarea></div>

(я также связал его как расширение Chrome на всякий случай.)

Я хочуОтмена / Повторить для идеального функционирования как в текстовой области, а также contenteditable узлов.Я также попробовал document.execCommand в обоих режимах insertText и insertHTML, но безуспешно.Я посмотрел на два других связанных вопроса, но они не отвечают на мой запрос.( q1 , q2 )

Что еще может быть возможным решением этой проблемы?

1 Ответ

0 голосов
/ 11 июня 2019

Благодаря приведенным выше полезным комментариям моя проблема заключалась в execCommand в предварительно запрограммированных странных редакторах, таких как Facebook messenger box, tinymce и т. Д. Они могут иметь свои собственные настройки, мешающие работе.

В обычных текстовых редакторах document.execCommand должно работать нормально и поддерживать отмену / повтор. Используйте это так:

document.execCommand('insertText', false, "text");
document.execCommand('insertHTML', false, "html");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...