2011-12-07 9 views
0

私はjqueryテキストエディタを作りたいと思います。私はグーグルをして、基本的な機能をいくつか持っています。ユーザーがテキストエリア内のテキストを強調表示すると、[b]が前面に追加され、 [/ b]テキストの末尾にあるが、ユーザーが同じボタンを再度クリックすると、入力されたすべてのデータが消去され、[b] [/ b]でハイライトされたテキストのみがコードになります:jquery text editor

$('#bold').mousedown(function(e) { 
    var txt = ''; 
    if (window.getSelection){ 
     txt = window.getSelection(); 
    } 
    else if(document.getSelection){ 
     txt = document.getSelection(); 
    } 
    else if(document.selection){ 
     txt = document.selection.createRange().text; 
    } 
    else return; 

    txt = "[b]"+txt+"[/b]"; 

    $('#reply').val(txt); 
}); 

HTML

<input type="button" value="Bold" id="bold" /> 
<form action="" method="get"> 
<textarea name="reply" id="reply" cols="100" rows="30">Test</textarea> 
</form> 
+3

なぜホイールを再作成するのですか? –

+0

私はプロジェクトに取り組んでいます。売り切れたときに、サードパーティのものがそれに含まれていることを望ましくありません。 –

答えて

0

選択は最初のクリック後にクリアされているからです。したがって、2番目の置換には折り返すテキストがないので、テキストエリアに[b][/b]を追加するだけです。

は何かを選択したかどうかをチェックif状態で交換を行う行をラップしてみてください。

if (txt !== undefined && txt.length > 0) { 
    txt = "[b]"+txt+"[/b]"; 
    $('#reply').val(txt); 
} 

あなたのロジックはしかし欠陥が表示されます。テキストエリアに次のテキストがあるとします:

Lorem ipsum dolor sit amet。

私はipsumを強調表示し、#boldボタンをクリックすると、テキストエリアには、他のすべての単語を削除し、今ちょうど言うだろう:

[B]イプサム[/ B]

既に存在する他のjQueryテキストエディタはたくさんあります。これは、プロダクションプロジェクトの場合は、これらのいずれかを使用するために多くの時間を節約します。あなたがjQueryを学ぼうとしているなら、是非、続けてください。

+0

txt.lengthは何もしません。代わりにundefinedと言います。 –

+0

私は答えで条件チェックを修正しました。 –

+0

まだ動作していません –