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

【问题标题】：Javascript : how to insert tags around a text selection?Javascript：如何在文本选择周围插入标签？
【发布时间】：2016-05-08 09:50:25
【问题描述】：

我想创建一个带有 contenteditable div 的小型 WYSIWYG HTML 文本编辑器。

为此，我使用 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>

【问题讨论】：

标签： javascript contenteditable

【解决方案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>

【讨论】：

这确实是正确的方法。但是编写自己的编辑器几乎是一场噩梦……每个浏览器都有自己的实现，IE 使用 而不是 作为示例。一些浏览器添加随机属性。每个浏览器对换行都有自己的想法，<div>、、  等等...我曾经尝试编写自己的编辑器，但最终放弃了很多需要做的事情使用完全相同的跨浏览器。
@Daniel 非常感谢，这是最好的解决方案。如果我想添加 ul 标签并显示
的第一个点，我该怎么做？

@totoaussi，我认为您可以使用 document.execCommand('insertOrderedList') 来做到这一点。以下是您可以使用的命令列表developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

【解决方案2】：

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

当我写我的时，我最终将所有样式转换为跨度 - 最后它更容易并且在浏览器之间提供了一致性。

因此，对于跨度，您将当前选择替换为（例如：）your selected text

工作是一种享受...

【讨论】：

并添加
- 点，你怎么做？
等一下！ - 我以为我们在谈论替换选择 - 添加一个新列表就是添加一个新的块元素，所以它应该插入到相关元素之前或之后。你需要 document.createElement("UL");然后 Elm.parentNode.insertBefore() - 查看详细信息 - 然后您可以通过设置新的 UL 元素的 innerHTML 添加第一个 LI 元素。（提供其他变体）。

【解决方案3】：

将“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>

【讨论】：

替换文本是个坏主意，如果选择的文本包含部分粗体文本，则 html 最终会在  标签内包含不必要的  标签。
坏主意，如果您的内容是：“将名称 siva 设为粗体 siva siva”，然后选择最后一个“siva”？

【解决方案4】：

您可以将-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.");
  }
}

【讨论】：

它不适用于多行文本中的文本选择。
另见我的评论@siva，这是一个坏主意，不推荐。所以有 2 个选项，使用内置的 execcommand 并继续编写 js 直到 infiniti 以使其在相同的跨浏览器中工作，或者为 execcommand 编写自己的实现，并为所有其他用户交互（如换行符）编写自己的实现。我决定选择选项 3：使用现有的插件，让其他人完成工作......

【解决方案5】：

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

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

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

  
    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>

【讨论】：