execCommand with several contenteditable divs

Question

execCommand with several contenteditable divs

Navigation

#1 by (2 votes)

1

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>
<div class="text" contenteditable="true" id="txt1"></div>
<div class="text" contenteditable="true" id="txt2"></div>
<div class="text" contenteditable="true" id="txt3"></div>
<script>
    $($('.herra div')[0]).click(function() {document.execCommand('bold', false, null);});
</script>

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.

javascript jquery div

asked by Gerry Studios 01.09.2017 в 13:26

source

1 answer

Problem with a badly closed div Is it possible to do a kind of WHERE *?

score 2 · Accepted 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() {
    document.execCommand('bold',false,null);
}

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