JQuery textareaはRTEのようなhtmlビットを挿入しますが、RTEは挿入しません。

Question

ここをクリックしてください - <textarea></textarea>は何を使用するのですか？私は、テキストエリアに適切なコードを挿入するRTEのような一連の「ボタン」を作成したいと思います。しかし、これは「真のRTE」ではないことに注意してください。私が望むのは、RTEのような「メニュー」を持つテキストエリアですが、2つまたは3つのボタンしかありません。私はボタンのコードが同じになると思う。うーん...どこに行こう... OKこれを試してみてください...この（StackOverflow）RTEには "画像"ボタンがあります。私は同じことを作る方法を知りたいと思います（私が思うすべてのボタンは基本的に同じものと思われます）。 「モーダル」は画像src/uploadまたはテキストエリアにYouTubeリンクやFlickrリンクなどを貼り付けることができます（別々のボタンになります）。ボタンなどを作成したり、モーダルを開閉することができますあなたはどのようにコードを入手することができます<textarea></textarea>

ポインタ&提案してください。 - ああ、私は完全にRTEを必要としないので、「CKeditorをカットする」などは過度に過剰です。テクセルエリアで「アップロード/使用」されるHTMLは、<img src=""><embed>か、おそらく（考えて）<a href=""> 。

Answer 1

textarea要素内の実際のカーソル位置にテキストを挿入する場合。これはあなたを助けるでしょう。

注：テキストエリア内のすべてのHTMLをレンダリングすることはありません知っているよう..あなたはRTEエンジンのような、より複雑なソリューションを使用する必要があります。これを行うために...

はこれを試してみてください：

function insertAtCursor(myField, myValue) { 
    //IE support 
    if (document.selection) { 
     myField.focus(); 
    sel = document.selection.createRange(); 
    sel.text = myValue; 
    } 
    //MOZILLA/NETSCAPE support 
    else if (myField.selectionStart || myField.selectionStart == ‘0′) { 
     var startPos = myField.selectionStart; 
     var endPos = myField.selectionEnd; 
     myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); 
     } else { 
      myField.value += myValue; 
     } 
    } 

// calling the function: 
insertAtCursor(document.formName.fieldName, 'this');