execCommand with several contenteditable divs


I have a page with 3 div in contenteditable:

<div class="herra">
    <div title="Negreta"><b style="font-size: 2em;">N</b></div
    <div title="Cursiva"><i style="font-size: 2em;">K</i></div
    <div title="Subratllar"><u style="font-size: 2em;">S</u></div>
<div class="text" contenteditable="true" id="txt1"></div>
<div class="text" contenteditable="true" id="txt2"></div>
<div class="text" contenteditable="true" id="txt3"></div>
    $($('.herra div')[0]).click(function() {document.execCommand('bold', false, null);});

What I want to achieve is to put the selected text of the div that I am writing in bold, I have tried with document.execCommand('bold', false, null); but it does not work for me.

Use jquery. Thanks in advance.

asked by Gerry Studios 01.09.2017 в 13:26

1 answer


Look to see if this serves you, when selecting a text and clicking on the button it becomes bold:

var negrita = document.getElementById("negrita");
negrita.addEventListener("click", function() { bold(); });

function bold() {
<button href="#" id="negrita">Negrita</button> 
<div class="text" contenteditable="true" id="txt1">Texto1</div>
<div class="text" contenteditable="true" id="txt2">Texto2</div>
<div class="text" contenteditable="true" id="txt3">Texto3</div>
answered by 01.09.2017 / 14:01