2009-05-14 6 views
1

jQueryまたはストレートjavascriptを使用して、contentEditableを使用してdivから1行のテキストを特定/選択/選択し、そのテキスト行に書式を追加するにはどうすればよいですか?クリックしたときにdiv内のテキスト行をどのように書式設定しますか?

私は現在contentEditableがtrueに設定されているdivを持っています。これにより、divの内容を編集したり、テキストを追加/削除したりすることができます。ただし、div内のテキスト行をダブルクリックして、その行を別の書式設定スタイルでマークすることもできます。 (つまり、スパン内にテキストの全行を囲み、スパンをスタイルすることができます)ユーザーがクリックしたテキスト行を特定してスパンタグに囲んで問題を解決することになります)

ユーザーは多くのコンテンツを追加できるので、div自体はスクロール可能であるため、どのような解決策でもスクロールを処理できるはずです。

+0

ラップされたテキストまたは各行が明確に区切られていますか(
など)? 前者の場合、私はそれがより難しく、不可能であると私は思う。 – PhiLho

+0

私の研究からわかるように、contentEditableを使用すると、firefoxは各行を
で区切ります。 IEは各行を段落で区切っていると思います。 – snorkpete

+0

修正:contentEditableを使ってdivにコンテンツを追加すると、IEがどのように行を区切るかわかりません(Firebugなし、IE Dev Toolbarは役に立ちません)。 – snorkpete

答えて

1

jQuery fieldSelection pluginは、ユーザーが選択したテキストを取得できるようにします。

スパンで選択した行を折り返す限り、通常のjQuery $().wrap()メソッドではこのトリックを行う必要があります。

使用できるFirefoxの場合
+0

fieldSelectionプラグインは、テキストフィールドとテキストエリアでのみ動作するようです。私の表示領域はdivです(contentEditableをオンにします) – snorkpete

+0

ソリューションを探すときにdivを使用していることを完全に忘れています。 元の作者が意図していなかったコンテキストで動作する他のいくつかのjQueryプラグインにパッチを当てていると付け加えたいと思います。これはfieldSelectプラグインのオプションである可能性があります。他の場所で解決策が見つからない場合は、これが最善の策かもしれません。あなたがそのように行くことを選択し、いくつかの助けが私に知らせたい場合。 –

+0

ご了承いただきありがとうございます。私はまだその道を行くのかどうか分からないが、もし私がして助けが必要なら、私は頼むようになるだろう。 – snorkpete

0

:ここ

// This will give the first selection: 
var range = window.getSelection().getRangeAt(0); 
var txt = range.toString(); 
var spn = document.createNode('span'); 
spn.innerHTML = txt; 
// Here you can apply style to spn 
range.surrondContents(spn); // It will surround your selected text 

は、より多くの助けを得るためのリンクです: あなたが使用できるIE用https://developer.mozilla.org/en/DOM/range.surroundContents

: あなたが使用して...あまりにもIEで同じプロセスを使用することができます

あなたの問題を解決することを願っています。

関連する問題