Javascript : how to insert tags around a text selection?

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>