如何在創建基本文本編輯器時將 javascript 中的選定區域加粗？

Question

我正在嘗試使用 Rxjs 和 javascript 創建基本的文本編輯器。 我在.html 文件中創建了一個名為“B”的按鈕，單擊該按鈕會使 textarea 中的選定文本變為粗體。如何使用 javascript 下面的粗體內容（） ZC1C425268E68385D1ABZA94 為 textarea 中的選定文本設置樣式？ 另外，如果選定的文本完全是粗體，那么如何使粗體按鈕自動選擇？

我知道這是非常基本的疑問，但我是 javascript 的初學者。 如果有人能幫助我理解這一點，那就太好了。

let btnbold=document.getElementById('btnbold');
let textarea=document.getElementById('text_area_id');


fromEvent(btnbold,'click').subscribe(()=>boldcontent());

let boldcontent=()=>{
let selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);


}```

Answer 1

讓我們專注於改變文本並將 rxjs 放在一邊。 在您的boldcontent中，您有：

let selection = textarea.value.substring(
  textarea.selectionStart,
  textarea.selectionEnd,
);
      

但這僅包含選定的文本。 您真正想要做的是用兩個星號**括起來的選定部分替換 textarea 中的整個文本（假設 markdown 是您的首選方法）：

  const {value, selectionStart, selectionEnd} = textarea;
  const newValue =
        value.slice(0, selectionStart) + // (1) 
        "**" + 
        value.slice(selectionStart, selectionEnd) + // (2)
        "**" +
        value.slice(selectionEnd, value.length); // (3)
  textarea.value = newValue;

(1)這會在所選文本之前獲取 substring

(2)這是選中的文字

(3)這是選擇后剩余的substring

然而，這是一個非常有限的例子，遠未准備好生產。 正確的實現還可以確保每個**都有一個相應的結束標記。 部分選擇的粗體文本應與新選擇等正確合並...要涵蓋所有這些邊緣情況，您可以在 SO 上創建新問題。