CODEWITHSUNDEEP
javascripthtmlwysiwygtext-editor
Jennifer Zhou
Jennifer Zhou

Reputation: 343

WYSIWYG Editor Bold Text in TextArea

I want to be able to bold the text in the textarea when I press the bold button. However, when I press the bold button, the text does not change at all. Furthermore, I want the text to remain highlighted after I bold the text. How would I do that?

HTML Code:

 <div class="col-md-8">
                            <input type = "button" value = "B" onclick = "bold()">
                            <input type = "button" value = "I" onclick = "italics()">
                            <input type = "button" value = "U" onclick = "underline()">
                            <input type = "button" value = "Size" onclick = "fontsize()">
                            <input type = "button" value = "Color" onclick = "fontcolor()">
                            <input type = "button" value = "Highlight" onclick = "highlight()">
                            <input type = "button" value = "Link" onclick = "link()">
                            <input type = "button" value = "Strike" onclick = "strikethrough()">
                            <input type = "button" value = "Exp" onclick = "exponent()">
                            <input type = "button" value = "Sub" onclick = "subscript()">
                            <input type = "button" value = "Bullet" onclick = "bullet()">
                            <input type = "button" value = "List" onclick = "list()">
                            <input type = "button" value = "Space" onclick = "spacing()">
                            <br><br>

                        <textarea name = "content" id = "content" style = "width: 720; height: 400;" ></textarea>

Javascript Code:

function bold(){
    content.document.execCommand('bold', false, null);
}

Upvotes: 1

Views: 1040

Answers (1)

Saikrishna Rajaraman
Saikrishna Rajaraman

Reputation: 3273

enter image description here

As per the documentation document execCommand only toggles bold on/off only for the selection. If u dont have any selection then the bold style is applied in the insertion point.

I guess you dont need to give,

content.document.execCommand('bold',false,null);

Just 

document.execCommand('bold',false,null);

will do.

Upvotes: 2

Related Questions