Javascript : how to insert tags around a text selection?

Question

I want to create a little WYSIWYG HTML text editor with a contenteditable div.

For that, I use window.getSelection() to retrieve the selected text, and when I click in a button (button bold), I execute a function to add bold tags around the selected text.

But I don't have any idea about the javascript code (without JQuery) to add bold tags.

Here my code :

<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

It's actually simpler than you might think:

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

Writing your own editor is not that nightmare-ish - but it does require a lot of time, attention to detail and learning.

When I wrote mine I ended up converting all styling to spans - in the end it's easier and gives a consistency across browsers.

So with spans, you replace the current selection with (eg:) <span style="font-weight:bold">your selected text</span>

Works a treat...