ユーザーが選択したテキストだけを取って、コンテンツをラップするテキスト-私のハイライトのために今、文書やメイクコメントのテキストをハイライト表示することができつもりである学生のためのアプリケーションの作成-私mark使用してタグをwindow.selection.getRangeAt(0).surroundContents()、今、私がする必要があるのは、選択したhtmlを取得し、ブラウザがhtmlタグを自動的に開いたり閉じたりしないようにすることです。たとえば、次のテキストがあります。
スーパーワンダーウルトラメガプロモーション。
ここで、テキストのHTMLはこれ<p>Super wonder <strong>ultra mega</strong> promtion</p>になります。ユーザーSuper wonder ultraがHTMLを選択すると、返さ<p>Super wonder <strong>ultraれます。ユーザーmega promotionがHTMLを選択した場合は、取得する必要がありますmega </strong> promtion</p>が、ブラウザがタグを自動的に開いたり閉じたりするためSuper wonder ultra、HTMLを選択すると取得します。戻るは<p>Super wonder<strong>ultra</strong></p>です。この動作を回避する、またはこれを達成する方法はありますか。
これは、選択したhtmlを取得するために使用している関数です。
public getHtmlSelection(selection: any): string {
let html: string;
const container = document.createElement('div');
for (let i = 0, len = selection.rangeCount; i < len; ++i) {
container.appendChild(selection.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
return html;
}
ここで、選択したテキストを強調表示します。
public markContent(): void {
const selection: any = window.getSelection();
const range: any = selection.getRangeAt(0);
if (range.startOffset !== range.endOffset) {
if (this.markerEvent === 'p' || this.markerEvent === 'mark' || this.markerEvent === 'strong') {
const textSeleted: string = selection.toString();
const highlight: any = range.commonAncestorContainer;
if (this.markerEvent !== 'mark') {
const marker: any = document.createElement('mark');
marker.setAttribute('class', this.colorMarker);
range.surroundContents(marker);
this.hideBubble();
return;
}
const mark: any = range.commonAncestorContainer;
mark.remove();
range.deleteContents();
range.insertNode(document.createTextNode(highlight.textContent));
this.hideBubble();
}
}
}
ヘルプやコメントをありがとうございます。明確にしない場合は、コメントで少しだけ質問してください。
@ gforce301のおかげで、状況の解決策を見つけることができました。問題のコンテキストを説明するだけで、彼が投稿した解決策に@ gforce301が言及しているようなテキスト選択クロスタグをラップできなかったため、すべてが始まります。私はこの方法でhtmlを取得しようとしていました：bold text</strong> and more text</p>私のアイデアは、markタグを閉じる前にテキストをチェックして</strong>タグを開いて閉じ、最後に別のマークタグを開いて、選択の最後に閉じるというものだったためです。<mark>bold text</mark></strong><mark>and more text</mark>しかし、閉じられていない開いたタグが見つかった場合はブラウザが閉じ、閉じたタグだけが見つかった場合は開いたタグが見つかるため、このHTMLを取得していました<p><strong>bold text</strong> and more text</p>。
@ gforce301のソリューションをテストした後、私はこのソリューションに到達します：
public markContent(): void {
const selection: any = window.getSelection();
const range: any = selection.getRangeAt(0);
if (range.startOffset !== range.endOffset) {
const htmlSelection = this.getHtmlSelection(selection);
const textSeleted: string = selection.toString();
const highlight: any = range.commonAncestorContainer;
if (this.markerEvent !== 'mark') {
const marker: any = document.createElement('mark');
marker.setAttribute('class', this.colorMarker);
marker.innerHTML = htmlSelection;
range.deleteContents();
range.insertNode(marker);
this.hideBubble();
return;
}
const p = document.createElement('p');
p.style.display = 'inline';
p.style.margin = '0';
p.innerHTML = highlight.innerHTML;
highlight.remove();
range.deleteContents();
range.insertNode(p);
this.hideBubble();
}
}
基本的に私がしているのは、この関数を使用して選択したHTMLを取得することです。
public getHtmlSelection(selection: any): string {
let html: string;
const container = document.createElement('div');
for (let i = 0, len = selection.rangeCount; i < len; ++i) {
container.appendChild(selection.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
return html;
}
HTMLを定数に保存し、mark要素を作成して、作成した新しいmark要素に選択範囲のHTMLを挿入し、選択内容を削除してから、選択範囲にmarkノードを挿入します。ユーザーがすでに強調表示されているテキストを再度選択した場合、強調表示された保留テキストからマークタグが削除されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加