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' });