contenteditable - Javascript : how to insert tags around a text selection? - Stack Overflow

admin管理员组

文章数量:1245917

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>

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>

• javascript
• contenteditable

Share Improve this question Follow edited Jan 30, 2016 at 18:29 totoaussi asked Jan 30, 2016 at 18:08 totoaussitotoaussi 73111 gold badge1414 silver badges2929 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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>

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

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>

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

本文标签： contenteditableJavascripthow to insert tags around a text selectionStack Overflow