如何在输入时连续将div中的文本加粗

Question

我有一个待办事项应用程序，要求我添加更多功能，例如：添加一些用于粗体和斜体文本的按钮。在输入中，按下“粗体”按钮后，要输入的文本将变为粗体，而前一个文本（按下“粗体”按钮之前的文本）将保持常规状态。我知道无法将输入中的文本部分加粗，因此我用 div 模拟了输入：const div = document.querySelector('div');div.innerHTML = '';const bold = document.getElementById('boldBtn');const italic = document.getElementById('italicBtn')bold.style.backgroundColor = 'white';let previousText = '';let boldString = '';boldBtn.addEventListener('click', () => {    boldBtn.classList.toggle('bold-selected');    if (boldBtn.classList.contains('bold-selected')) {        boldBtn.style.backgroundColor = "gray";        previousText = div.innerHTML;        console.log(previousText)        div.addEventListener('keydown', boldText)    }    else {        bold.style.backgroundColor = "white";        div.removeEventListener('keydown', boldText);    }})function boldText(e) {    div.innerHTML = div.innerHTML.substr(1)    console.log("Previous text: " + previousText);    const NOT_ALLOWED = ['Backspace', 'Shift', 'Control', 'Alt'];    if (!NOT_ALLOWED.includes(e.key)) {        boldString += e.key;        console.log("Bold text: " + boldString)        console.log(previousText + boldString)        div.innerHTML = previousText + "<strong>" + boldString + "</strong>"    }}div {    border: 1px solid black;    width: 200px;    height: 20px;  }  .font-style {    border: 1px solid blue  }<div contenteditable="true"></div><button id="boldBtn" class="font-style">Bold</button><button id="italicBtn" class="font-style">Italic</button>尝试在 div 中写下“cool”之类的内容，然后按粗体按钮，然后键入一个字母。你会看到 div 得到了这个innerHTML：letter+cool+boldletter。并且光标设置在div内容的开头。请帮助我或至少给出一个提示来完成想要的行为！我已经花了3-4个小时了，我准备放弃了......编辑：我想我没有说清楚：我不想使 div 的整个内容变为粗体，而只是其中的一部分/部分/部分。如果没有按下任何按钮，则要写入的文本应该是常规的，如果按下粗体按钮，则要写入的文本应该是粗体，与斜体按钮相同。也许如果同时选择粗体和斜体，则未来的文本应该是粗体和斜体。但这是另一个问题......我想要的一个例子是https://html-online.com/editor/。删除默认文本，只在左侧面板上写字，然后尝试使用上面的粗体、斜体按钮。左侧面板中将显示 HTML 生成的代码。我需要相同的功能...

Answer 1

为了在选择“粗体”时使文本变为粗体，请从当前选择范围中获取范围并在其中插入元素“strong”。

  let range=window.getSelection.getRangeAt(0);

  let elem=document.createElement('strong');

  elem.innerHTML='&#8203;'

  range.insertNode(elem);

这将使文本变为粗体，同样也适用于斜体选项。现在，当您需要禁用它时，问题就出现了，因为我必须清除选择中的当前范围，并将范围设置为“div”的末尾，并插入新元素“span”（我将 span 用于普通文本）。

同样我也处理过以下情况

1. 当粗体和斜体按下时（在这种情况下您需要存储以前的元素）

2. 当按下 Enter 时（ div 正在被创建并产生问题，所以我必须设置 keydown 侦听器并使用 document.execCommand 不创建 div 而是创建 br）

如果有人有兴趣更新我的解决方案以使其有效，欢迎您

var boldButton=document.querySelector('#boldBtn'),

 italicButton=document.querySelector('#italicBtn'),

contentDiv=document.querySelector('#content'),

bold=false,italic=false,range,prevElement,selection;

;

contentDiv.addEventListener('keydown',function(e){

 if (e.keyCode === 13) {

       window.document.execCommand('insertLineBreak', false, null);

       range=window.getSelection().getRangeAt(0);

       range.collapse();

       prevElement=undefined;

       if(bold) addElement('strong');

       if(italic) addElement('i');

       e.preventDefault();

      return false;

    }

    return true;

});

boldButton.addEventListener('click',function(){

    debugger

    bold=!bold;

    boldButton.classList.toggle('border-black');

    if(!bold)

      disable('bold');

    else

      addElement('strong');

});

italicButton.addEventListener('click',function(){

   debugger;

   italic=!italic;

   italicButton.classList.toggle('border-black');

   if(!italic)

       disable('italic');

    else

      addElement('i');

});

function addElement(element){

  if(!selection)selection=window.getSelection()

  range=selection.getRangeAt(0);

  let elem=document.createElement(element);

  elem.innerHTML='&#8203;'

  if(prevElement)

    range.selectNodeContents(prevElement);

  range.collapse();

  range.insertNode(elem);

  elem.focus();

  prevElement=elem;

}

function disable(elem){

 if(italic && bold) return;

setRangeAtEnd();

 let element=document.createElement('span');

 if(italic)

   element=document.createElement('i');

 else if(bold)

   element=document.createElement('strong');

 element.innerHTML='&#8203;'

 range.insertNode(element);

 range.setStart(element,1);

 element.focus();

}

function setRangeAtEnd(){

 let childNodes=contentDiv.childNodes;

 range=document.createRange();

 range.setStartAfter(childNodes[childNodes.length-1]);

 prevElement=undefined;

 if(!selection)selection=window.getSelection();

 selection.removeAllRanges();

 selection.addRange(range);

}

#content{

border:1px solid black;

height:150px;

}

.border-black{

border:2px dotted black;

}

<div id="content" contenteditable="true"></div><br>

<button id="boldBtn"  class="font-style">Bold</button>

<button id="italicBtn"  class="font-style">Italic</button>

Answer 2

是的，有一个解决办法，因为你可以使用 jquery 来解决这个问题

<script>

$(document).ready(function () { 

$("#boldBtn").click( function() { 

$("your input id or class").keyup(function () { 

$("your input id or class").css("fontWeight", "bold");

  });

 });

});

</script>

其中your input id or class提到如果您有班级，则将其写为.classname或如果您有 id 则写为#id。

希望这可以帮助你。