Javascript : 如何在文本选择周围插入标签？

Question

我想创建一个 WYSIWYG HTML 文本编辑器，内容可编辑 div。

为此，我使用 window.getSelection() 检索所选文本，当我单击按钮（粗体按钮）时，我执行一个函数以在所选文本周围添加粗体标记。

但我对 javascript 代码（没有 JQuery）添加粗体标签一无所知。

这是我的代码：

<input type="button" value="B" style="font-weight:bold;" onclick='add_tags("b");'>

<div id="container_contenteditable" class="container_contenteditable" contenteditable></div>

<script type="text/javascript">

function add_tags(tags)
{
    container_contenteditable = document.getElementById("container_contenteditable");

    //Retrieve the selected text :
    sel = window.getSelection();
}

</script>

Answer 1

其实比你想象的要简单：

function add_tags(tags)
{
    document.execCommand('bold');
}

<input type="button" value="B" style="font-weight:bold;" onclick='add_tags("b");'>

<div class="container_contenteditable" contenteditable style="border:1px solid; margin: 10px 0; height: 100px;"></div>

Answer 2

将 "container_contenteditable" 设置为 id 属性，因为您正在使用 getElementById。

您可以使用替换功能替换选中的文本。这是修复。

function add_tags(tags)
{
    var container_contenteditable = document.getElementById("container_contenteditable");

    //Retrieve the selected text :
    var sel = window.getSelection();
    var text = container_contenteditable.innerHTML;
  container_contenteditable.innerHTML = text.replace(sel, '<b>'+sel+'</b>');
}

<input type="button" value="B" style="font-weight:bold;" onclick='add_tags("b");'>

<div id="container_contenteditable" contenteditable>Make the name siva to bold</div>

Answer 3

您可以将 <b>-tags 包裹在选择的周围：

此外，您的 HTML 应该如下所示：

<input type="button" value="B" style="font-weight:bold;" onclick='add_tags("b");'>

<div id="container_contenteditable" contenteditable>TestTextTest</div>

和JavaScript：

    function add_tags(tags) {
  container_contenteditable = document.getElementById("container_contenteditable");
  //Retrieve the selected text :
  sel = window.getSelection();
  //Check if selection does contain something
  if (sel != "") {
    //set the innerHTML of container_contenteditable
    //we're just wrapping a <b>-tag around the selected text
    container_contenteditable.innerHTML = "<b>" + sel + "</b>";
  } else {
    //if the selected text was blank
    alert("Nothing selected.");
  }
}

Answer 4

编写自己的编辑器并不是噩梦 - 但它确实需要大量时间、对细节的关注和学习。

当我编写我的代码时，我最终将所有样式转换为跨度 - 最后它更容易并且在浏览器之间保持一致。

因此，对于跨度，您将当前选择替换为（例如：）<span style="font-weight:bold">your selected text</span>

工作愉快...

Answer 5

此函数 execCommand() 已弃用。不要使用它。 https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

已弃用：不再推荐此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在被删除，或者可能只是出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性 table 以指导您的决定。请注意，此功能可能随时停止工作。

这才是正确的做法！如何使用多个的示例：

  
    function add_tags(tags) {
        let container_contenteditable = document.getElementById("container_contenteditable");
    
        //Retrieve the selected text :
        let sel = window.getSelection();
        let text = container_contenteditable.innerHTML;
      container_contenteditable.innerHTML = text.replace(sel, '<'+tags+'>'+sel+'</'+tags+'>');
    }

    <input type="button" value="B" style="font-weight:bold;" onclick='add_tags("b");'>
    <input type="button" value="i" style="font-style:italic;" onclick='add_tags("i");'>
    
    
    <div id="container_contenteditable"> My text here.</div>

Javascript : 如何在文本选择周围插入标签？

Javascript : how to insert tags around a text selection?

javascript

contenteditable