Как выполнить программный ввод текста, который поддерживает как отмену, так и повтор?
Мое текущее расширение Chrome должно программно вставлять текст при вводе пользователем. Это прекрасно работает, однако искажает поведение отмены/возврата всех текстовых редакторов, в которых я пробовал это до сих пор. Итак, следующая рутина:
- введите какой-нибудь текст
- вставить текст программно
- введите больше текста
- нажмите ctrl-z трижды
не всегда возвращается в пустое состояние. Очень часто он застревает где-то посередине. Его поведение в основном непоследовательно.
Вот MCVE сценария контента:
function init() {
var $input = document.getElementsByTagName("textarea")[0];
if (!$input) {
console.info("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 на случай, если вам это понравится.)
Я хочу, чтобы отмена/повтор отлично функционировали как в текстовой области, так и в узлах, доступных для редактирования. Я также безуспешно пробовал document.execCommand в режимах insertText и insertHTML. Я просмотрел два других связанных вопроса, но они не отвечают на мой запрос. (q1, д2)
Какое еще может быть возможное решение этой проблемы?
Если вы программно вставляете и удаляете текст, вам нужно будет программно отслеживать историю отмен и самостоятельно обрабатывать ctrl-z.
execCommand — правильное решение, отвечающее всем вашим потребностям. Тот факт, что это не сработало для вас, может означать, что вы использовали его неправильно в конкретной ситуации. Возможно, вы не сфокусировали элемент. Или что-то еще мешало.
@PatrickEvans Привет, ты прав. Раньше я использовал другой редактор. execCommand работает!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Благодаря полезным комментариям выше, моя проблема заключалась в том, чтобы делать execCommand в предварительно запрограммированных странных редакторах, таких как ящик для обмена сообщениями Facebook, tinymce и т. д. У них могут быть свои собственные настройки, мешающие.
В обычных текстовых редакторах document.execCommand должен работать нормально и поддерживать отмену/возврат. Используйте это так:
document.execCommand('insertText', false, "text");
document.execCommand('insertHTML', false, "html");
Установка свойства
valueнапрямую не будет отменена с помощью сочетания клавиш Ctrl-Z. Однако использование команды insertText было отменено с помощью ctrl-z, по крайней мере, в моем браузере Chrome как для textarea, так и для contenteditables в обязательном порядке. Обратите внимание, если под текстовыми редакторами вы подразумеваете редакторы фреймворков, такие как tinymce или им подобные, их код может мешать вашему или изменять работу ctrl-z/insertText в своих элементах.