How To Insert Text Into A Textarea Using JavaScript Without Messing Up Edit History?

Basically what i want is if a user selects some text in a textarea and presses ctrl + b then the text within the selection should be surrounded by stars. so basically what I want i

Solution 1:

Updated Version

To save user history when changing a textarea's overall value, instead of:

textarea.value = newText;

Use:

textarea.focus();
document.execCommand('selectAll',false);

var el = document.createElement('p');
el.innerText = newText;

document.execCommand('insertHTML',false,el.innerHTML);

It takes about ~1 second on my mid-end gaming rig with a string a little over 4,000 characters, so you'll have to figure out if that's acceptable for your use case.

Old Version

Maybe you're familiar with execCommand and wonder why we don't just use this:

textarea.focus();
document.execCommand('selectAll',false);
document.execCommand('insertText',false,newText);

On Chromium insertText is extremely slow, especially for longer strings. For an example over 4,000 characters, on my mid-gaming compy the same string as used in the Updated Version takes ~10 seconds.

It does save user history too though, and moving between history states is still an acceptable speed (~0.5 seconds).

Does it make sense that this is slower, since I would assume what I'm doing explicitly in the Updated Version Chromium's doing in the background anyway? No. But this is where Chromium's at today, I guess. Comment below if the Old Version becomes better.

General Notes

Unfortunately, execCommand doesn't work inside of textarea elements in Firefox. This may be fixed in an upcoming version.

Tested in Chromium and Firefox.

If I find a still faster solution (and/or one that works in Firefox), I will definitely share it.

Solution 2:

I got the below code from: http://www.javascriptsource.com/forms/undo-redo.html and you can check its working example as well.
Though you might need to implement your own functionalities such as Bold, Italic etc.

function iObject() {
  this.i;
  return this;
}

var myObject=new iObject();
myObject.i=0;
var myObject2=new iObject();
myObject2.i=0;
store_text=new Array();

//store_text[0] store initial textarea value
store_text[0]="";

function countclik(tag) {
  myObject.i++;
  var y=myObject.i;
  var x=tag.value;
  store_text[y]=x;
}

function undo(tag) {
  if ((myObject2.i)<(myObject.i)) {
    myObject2.i++;
  } else {
    alert("Finish Undo Action");
  }
  var z=store_text.length;
  z=z-myObject2.i;
  if (store_text[z]) {
  	tag.value=store_text[z];
  } else {
  	tag.value=store_text[0];
  }
}

function redo(tag) {
  if((myObject2.i)>1) {
    myObject2.i--;
  } else {
    alert("Finish Redo Action");
  }
  var z=store_text.length;
  z=z-myObject2.i;
  if (store_text[z]) {
    tag.value=store_text[z];
  } else {
  tag.value=store_text[0];
  }
 }

<form name=form1>
  <input type="button"  class="red" value="Undo" onmousedown="undo(document.form1.text1);">
  <input type="button" class="red" value="Redo" onmousedown="redo(document.form1.text1);">
  <br>
  <textarea rows=7 cols=50  name=text1 onkeydown="countclik(document.form1.text1);" >
  </textarea>
</form>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

I have used ckeditor in the past and would recommend to use it. You could also use niceditor