如何在创建基本文本编辑器时加粗 javascript 中的选定区域？

Question

我正在尝试使用 Rxjs 和 javascript 创建基本的文本编辑器。我在 .html 文件中创建了一个名为 'B' 的按钮，单击该按钮时会从 textarea 中选择文本 bold.How 我是否使用 javascript 为 textarea 中的所选文本设置样式下面的 boldcontent() 函数？另外，如果选定的文本完全是粗体，那么如何使粗体按钮自动选择？

我知道这是非常基本的疑问，但我是 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,
);

但这只包含选定的文本。你真正想要做的是用两个星号 ** 括起来的选定部分替换你的文本区域中的整个文本（在这里你首选的方法是降价）：

  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) 这将获取所选文本之前的子字符串

(2)这是选中的文字

(3)这是选择后剩下的子串

然而，这是一个非常有限的示例，远未准备好投入生产。正确的实现还将确保每个 ** 都有一个相应的结束标记。部分选中的粗体文本应与新选择等正确合并...要涵盖所有这些边缘情况，您可以在此处创建新问题。

如何在创建基本文本编辑器时加粗 javascript 中的选定区域？

How to bold a selected area in javascript while creating a basic text editor?

html

javascript

css

textarea

rxjs