第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

我想使用 window.getSelection 制作一個(gè)具有粗體功能的 HTML 文本編輯器

我想使用 window.getSelection 制作一個(gè)具有粗體功能的 HTML 文本編輯器

慕碼人2483693 2021-11-25 15:21:36
它使整個(gè)文本加粗。我只想將選定的文本加粗(絕對(duì)沒有 exec 命令)let boldBtn = document.getElementById('Bold-Btn');let boldClickListener = (event) =>{    event.preventDefault();    let selection = window.getSelection();    let final = `<span class="text-bold">${selection.focusNode.textContent}</span>`;    selection.anchorNode.parentElement.innerHTML=final;    console.log(selection);};boldBtn.addEventListener('click',boldClickListener);
查看完整描述

1 回答

?
慕慕森

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊

這樣做的一種方法可能是執(zhí)行以下操作:

  • 獲取窗口選擇。

  • 將選擇轉(zhuǎn)換為字符串以獲取文本。

  • 創(chuàng)建將是粗體的元素。

  • 更換包含在所選文本innerHTMLparentElement用粗體顯示的元素。

基于您提供的代碼的示例:

let boldBtn = document.getElementById('Bold-Btn');

let boldClickListener = (event) => {

  event.preventDefault();

  // Get selection

  let selection = window.getSelection();

  // Get string of text from selection

  let text = selection.toString();

  // Create bolded element that will replace the selected text

  let final = `<span class="text-bold">${text}</span>`;

  // Replace the selected text with the bolded element

  selection.anchorNode.parentElement.innerHTML = selection.anchorNode.parentElement.innerHTML.replace(text, final);

};


boldBtn.addEventListener('click', boldClickListener);

.text-bold {

  font-weight: bold;

}

<div>

Test this text

</div>

<button id="Bold-Btn">

Bold

</button>

請(qǐng)注意,您可能希望在創(chuàng)建粗體元素時(shí)添加更多邏輯來處理任何現(xiàn)有文本是否已經(jīng)是粗體。


查看完整回答
反對(duì) 回復(fù) 2021-11-25
  • 1 回答
  • 0 關(guān)注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)