contentEditable ExecCommand“粗体”无法触发

Question

I'm having a lot of trouble getting an execcommand "bold" to fire on my contentEditable div. I've tried a lot of solutions on similar questions here to no avail. I understand there are some bugs with execCommand; any help would be very much appreciated!

This is my code:

 $("#bolder").on('click', function() { document.execCommand("bold", false, null); });

 .text { position: relative; width: 100%; height: 90%; left: 0%; border: solid; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <button id="bolder" type="button">Bold</button> <div class="text" contenteditable="true"> This won't work </div> <img class="loader" id="loader" src="Social_Icons/loader.svg"> </div>

I'm using the latest Chrome browser.

Answer 1

Your code is working fine. But:

• If you just want to make some text inside the editor becomes strong , you have to select the text first.

• If you want to make all of the text becomes strong , you can focus the editor and use document.execCommand('selectAll',false,null) to select all of the text before applying bold .

This example to make all of the text to bold after clicking Bold button:

 $("#bolder").on('click', function() { $('[contenteditable]').focus(); document.execCommand('selectAll',false,null) document.execCommand("bold", false, null); });

 .text { position: relative; width: 100%; height: 90%; left: 0%; border: solid; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <button id="bolder" type="button">Bold</button> <div class="text" contenteditable="true"> This won't work </div> <img class="loader" id="loader" src="Social_Icons/loader.svg"> </div>