已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問我想使用...

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

JavaScript

慕碼人2483693 2021-11-25 15:21:36

它使整個文本加粗。我只想將選定的文本加粗（絕對沒有 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貢獻1856條經驗獲得超17個贊

這樣做的一種方法可能是執行以下操作：

獲取窗口選擇。
將選擇轉換為字符串以獲取文本。
創建將是粗體的元素。
更換包含在所選文本innerHTML的parentElement用粗體顯示的元素。

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

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>

Bold

</button>

請注意，您可能希望在創建粗體元素時添加更多邏輯來處理任何現有文本是否已經是粗體。

反對回復 2021-11-25

1 回答
0 關注
138 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

添加回答