Make selected text bold.

Question

How to make selected text bold/italic/underlined in javascript

Naimish Makwana · Answer

Hello Ankush, You can do as below. Your HTML CSS: div.container { width: 300px; height: 100px; border: 1px solid #ccc; padding: 5px; } .bold{ font-weight:bold; } .italic{ font-style :italic; } .underline{ text-decoration: underline; } Javascript: $(document).ready(function(){ $('.boldText').click(function(){ $('.container').toggleClass("bold"); }); $('.italicText').click(function(){ $('.container').toggleClass("italic"); }); $('.underlineText').click(function(){ $('.container').toggleClass("underline"); }); }); Working Example : https://codepen.io/Naimishcon/pen/abjagJW Thanks

Uday Dodiya · Answer

Hello Ankush, Try Following Code Bold Italic Underline Select some text in this area and click the buttons above to make it bold, italic, or underlined. var boldBtn = document.getElementById('boldBtn'); var italicBtn = document.getElementById('italicBtn'); var underlineBtn = document.getElementById('underlineBtn'); boldBtn.addEventListener('click', function() { document.execCommand('bold', false, null); }); italicBtn.addEventListener('click', function() { document.execCommand('italic', false, null); }); underlineBtn.addEventListener('click', function() { document.execCommand('underline', false, null); });

Naimish Makwana · Answer

Hello Ankush, To assign the tinymce function to the popupHTML variable, you can wrap the tinymce function call in an anonymous function and then assign the result to the popupHTML variable: const popupHTML = (function() { return tinymce({ height: 500, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help' }); })(); Thanks Naimish

Naimish Makwana · Answer

Hello Ankush, Please refer below link. https://stackoverflow.com/a/67260808/3054222 Thanks Naimish

Ankush Verma · Answer

I have use this code . Please let me know how to assign tinymce function popupHTML this variable const popupHTML = ` `; popupHTML=tinymce({ height: 500, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help' });

Make selected text bold.

Answers (5)