現在、編集可能な WebView を使用しており、選択したテキストを<H1>~に変更するコントロールを提供しています<H6>。デフォルトnormalのスタイル テキストは<div>
、テキストが対応するスタイルの種類 (H1 ~ H6 または DIV) を確認するために JavaScript を使用する方法を知りたかっただけです...
現在、次のコードを使用して、選択したテキストのテキスト スタイルを<H1>
[webView stringByEvaluatingJavaScriptFromString:
@"document.execCommand(\"FormatBlock\", false, \"<H1>\")"];
選択されているテキスト (ドラッグによるものか、カーソルの位置によるものか) が JavaScript を使用しているかどうかを確認する方法はありますか?
HTMLコンテンツの選択は、複数の要素にまたがることがあります。また、開始要素と終了要素内のテキストの一部のみで構成されている場合もあります。一般的なケースでは、選択に適用される単一の要素名またはCSSスタイルがないため、これにより、質問に対する正確な回答を提供することが困難になります。ただし、以下で説明する構成要素によって、意図に一致する動作を構築できるようになることを願っています。
WebKitのObjective-CAPIを使用しているので、これがObjective-CAPIとJavaScript内の両方でどのように機能するかを説明します。JavaScriptでは得られないコンパイラーのフィードバックがあるため、Objective-CAPIの使用はより快適になります。
WebView内の選択は、として表され、DOMRangeを使用して取得できます-[WebView selectedDOMRange]。選択は、ノードのテキストへの-startContainerオフセットで返される要素から始まります。選択は、によって返されるノード内で-startOffsetオフセットされるまで、DOMの順序ですべてのノードを介して続行されます。-endOffset-endContainer
挿入ポイントはDOMRange、プロパティで示されているように、折りたたまれたものとして表されcollapsedます。この場合-startContainer、と-endContainerは、カレットが存在するノードを示す同じ値を返す必要があり、-startOffsetと-endOffsetは等しく、カレットが存在するテキストコンテンツへのオフセットを表します。
関係するノードを特定したら、通常のDOM APIを使用してタグ名（-[DOMNode tagName]）を特定し、CSSオブジェクトモデルAPIを使用してスタイル情報（-[DOMDocument getComputedStyle:pseudoElement:]）を取得できます。
JavaScript側から見ると、概念は似ていSelectionますが、に到達する前にオブジェクトの中間ステップがありますRange。
window.getSelection()オブジェクトを取得するために使用しSelectionます。このオブジェクトには0個以上の範囲が含まれ、それぞれが選択された領域を表します。ゼロ範囲は、実際の選択ではなく挿入ポイントがあることを意味します。一部のプラットフォームでは不連続な選択がサポートされているため、複数の範囲が許可されます。
上記のように、SelectionオブジェクトのarangeCountは0で、isCollapsed値はtrueであり、選択が単なる挿入ポイントであることを示します。
rangeCountがゼロ以外の場合、を繰り返し呼び出すことにより、内の範囲を反復処理できSelectionますgetRangeAt。その時点から、上記のObjective-Cのケースで説明しRangeたオブジェクトと同じインターフェイスを持ち、、、、およびプロパティを持つオブジェクトの操作に戻ります。DOMRangestartContainerendContainerstartOffsetendOffset