JavaScriptを使用してテキストをテキストエリアに挿入する方法を教えてください。

Question

基本的には、ユーザーがテキストエリア内のテキストを選択してCtrl + bを押すと、選択範囲内のテキストを星で囲む必要があります。そう基本的に私が欲しいもの

は次のとおりです。

1）テキストエリアの内容：

2 "こんにちは、これはいくつかのテキストである"）ユーザーがこのがいくつかあるhello」をいくつかのテキストを選択し、Ctrl + Bキーを押しますテキスト」（太字の部分がテキスト選択であると仮定）

3）ので、私はテキストエリアの内容になりたい： 『こんにちは、この*は、いくつかの*テキスト』

です

4）と、ユーザがCtrl + Z（または任意のアンドゥアクション）を押すと のtextarea内容は、私がHow can i use javascript to insert text into a textarea?とInsert text into textarea at cursor position (Javascript)と似ていますが、試してみました

「こんにちは、これはいくつかのテキストである」であることに戻って行く必要がありますほとんどのブラウザでundo（ctrl + z）を実行すると、テキストがステップ1の値に戻ることが期待されますが、これは起こりません。私はstackoverflowがエディタで独自の元に戻すやり直し機能を実装することを理解しています。私はそんなに複雑にならないことを願っていました。 クロムとサファリをサポートしている必要があります

私は、カーソルの位置を決め、合成キーイベントを発行することを考えています。私はそれがうまくいくかどうかわからないし、問題のない場合

Answer 1

私は以下のコードをhttp://www.javascriptsource.com/forms/undo-redo.htmlから取得しており、その動作例も確認できます。
あなたは太字など、独自の機能を実装する必要があるかもしれませんけれども、斜体など

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]) { 
 
    \t tag.value=store_text[z]; 
 
    } else { 
 
    \t 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>

私は過去にckeditorを使用して、それを使用することをお勧めします。あなたも使用することができますniceditor