CODEWITHSUNDEEP
javascriptcontenteditable
totoaussi
totoaussi

Reputation: 741

Javascript : how to insert tags around a text selection?

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>

Upvotes: 7

Views: 4623

Answers (4)

Tony Duffill
Tony Duffill

Reputation: 287

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...

Upvotes: 3

jossiwolf
jossiwolf

Reputation: 2175

You could just wrap <b>-tags around the selection:

Furthermore, your HTML should look like this:

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

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

And the 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.");
  }
}

Upvotes: 1

Siva
Siva

Reputation: 2785

Set "container_contenteditable" as id attribute, since you are using getElementById.

You can replace the selected text with replace function. Here is the fix.

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>

Upvotes: 2

Daniel
Daniel

Reputation: 6481

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>

Upvotes: 7

Related Questions