20

I'm making a small javascript editor (for a chrome extension) somewhat like the one on SO.

There's a toolbar for manipulation of the text in the textarea. (e.g. surround the selected text with some template)

I was wondering if there is a easy way to achieve this, currently when using the system undo/redo, it messes the text up (I think the system is only keeping track of deltas between edits).

brian14708
  • 1,941
  • 2
  • 20
  • 28
  • 1
    Related: http://stackoverflow.com/questions/16195644/in-chrome-undo-does-not-work-properly-for-input-element-after-contents-changed-p – Timo Huovinen Aug 25 '15 at 17:37

2 Answers2

21

If the textarea has focus and its caret is at the correct position,

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

will insert the text "the text to insert", preserving the browser's native undo stack. (See the work in progress HTML Editing API spec.) Chrome 18 supports this, but I'm unsure of the exact version it was introduced.

Scott Hughes
  • 311
  • 2
  • 3
  • Undo works, but redo doesn't. It seems to forget the newest history item... http://jsfiddle.net/rudiedirkx/k4spa0dv/ (Chrome only) – Rudie Jan 14 '15 at 23:33
  • can't figure out what the `false` is? – krivar Aug 26 '18 at 13:37
  • 1
    Note that the HTML Editing API spec, while it would be useful, is now obsolete (and unsupported in most browsers: https://caniuse.com/#feat=ime). However, this apparently does not mean that `execCommand("insertText", ...)` is unsupported! – LarsH Oct 18 '18 at 12:58
20

You can probably simulate textInput events to manipulate the contents of the textarea. The changes made that way are respected by undo/redo, I think (I know they are in 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

Basically, the text is inserted as though you pasted it yourself. So if something is selected, it'll be be replaced with the text. If there's no selection, the text will be inserted at the caret's position. And undo/redo should work normally (undoing/redoing the entire inserted string in one go), because the browser acts as if you typed/pasted it yourself.

As I said, I know this works like a charm with undo/redo in Safari, so I'd assume it works in Chrome as well.

Flambino
  • 18,507
  • 2
  • 39
  • 58
  • 2
    In firefox you can replace the textarea value with `element.value = substring + data + substring;` and undo will still work – Timo Huovinen Apr 01 '14 at 10:48
  • 5
    As of Chrome 53 this won't work, because `document.createEvent` creates an untrusted event. See: https://stackoverflow.com/questions/39947875/as-of-chrome-53-how-to-add-text-as-if-a-trusted-textinput-event-was-dispatched – smddzcy Jun 10 '18 at 22:03