Javascript textarea undo redo

Я создаю небольшой редактор javascript (для расширения chrome), несколько похожий на тот, что на SO.

Есть панель инструментов для манипулирования текстом в текстовом поле. (например, окружайте выделенный текст некоторым шаблоном)

Мне было интересно, есть ли простой способ достичь этого, в настоящее время при использовании системы отменить/повторить, он перепутал текст (я думаю, что система отслеживает только дельта между изменениями).

Ответы

Ответ 1

Возможно, вы можете моделировать события textInput для управления содержимым текстового поля. Изменения, внесенные таким образом, соблюдаются путем отмены/повтора, я думаю (я знаю, что они находятся в Safari)

var element = document.getElementById('someTextarea');
var text = 'This text will be inserted in the textarea';
var event = document.createEvent('TextEvent');

event.initTextEvent('textInput', true, true, null, text);
element.dispatchEvent(event); // fire the event on the the textarea

В принципе, текст вставляется так, как если бы вы вставляли его сами. Поэтому, если что-то будет выбрано, оно будет заменено текстом. Если выбора нет, текст будет вставлен в положение каретки. И undo/redo должен работать нормально (отмена/повторное редактирование всей вставленной строки за один раз), потому что браузер действует так, как будто вы сами ввели/вставляли его.

Как я уже сказал, я знаю, что это работает как прелесть с отменой/повторением в Safari, поэтому я предполагаю, что это работает и в Chrome.

Ответ 2

Если текстовое поле имеет фокус и его каретка находится в правильном положении,

document.execCommand("insertText", false, "the text to insert");

будет вставлять текст "текст для вставки", сохраняя исходный стек отскока браузера. (См. Текущую работу Спецификация API редактирования HTML.) Chrome 18 поддерживает это, но я не уверен в том, какая именно версия была введена.