11


4

JavaScriptを使用してDOM範囲を拡張し、部分的に選択されたノードをカバーします

私は、Webアプリケーションのようなリッチテキストエディター、基本的にはjavascriptで記述されたXMLエディターに取り組んでいます。

私のjavascriptコードは、contentEditable divコンテナから選択したノードをラップする必要があります。 MDCで説明されているメソッドを使用しています。 ただし、divコンテナのコンテンツをXML DOMに同期する必要があるため、http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html [ w3c範囲]:

``

タイトル

Blah xyz。

…​…​…​…​ ^ ---------------- ^ …​…​…​…​

この選択はH1内で始まり、P内で終わります。H1、Pを完全に含めたいと思います。

部分的に選択された子を完全にカバーするように選択を拡張する簡単な方法はありますか? 基本的に、例外にぶつかることなくrange.surroundContents()を使用したいと思います。

(コードはopera / IEで動作する必要はありません)

3 Answer


9


MDCのドキュメントを見て、私は次のようなことを管理します。

Selection.prototype.coverAll = function() {
    var ranges = [];
    for(var i=0; i

ここで試すことができます:http://jsfiddle.net/GFuX6/9/

編集:拡張された選択がブラウザに正しく表示されるように更新されました。 選択範囲に複数の範囲が含まれている場合でも(Ctrlを使用して)、要求どおりに処理されます。

複数の部分ノードを太字にするための解決策を次に示します。

Selection.prototype.boldinize = function() {
    this.coverAll();
    for(var i=0; i


0


タグH1とP(つまり、有効なマークアップ)を含めたい場合は、心配しないでください。 それは無料で手に入ります。 (部分的な)選択範囲内のすべてのコンテンツを含めたい場合は、Selectionオブジェクトにアクセスする必要があります。 QuirksmodeのRangeの紹介でそれについて読んでください。


0


Alsciendeのおかげで、ついにhttp://jsfiddle.net/wesUV/21/でコードを思いつきました。 この方法は、他の方法ほど貪欲ではありません。 coverAll()の後、surroundContents()は常に機能するはずです。

Selection.prototype.coverAll = function() {
  var ranges = [];
  for(var i=0; i

そして、boldinize関数:

Selection.prototype.boldinize = function() {
  for(var i=0; i