如何在 HTML/javascript/jquery 中单击时激活粗体标签并在再次单击时停用

Question

I would like to know if there's a way in HTML/javascript/jquery to create the bold button like in MS.WORD.

When we click the bold button, any text we type in the textbox/textarea will be bold but when we click the button again, any text we type will be normal again but the bolded text will still be bold

any suggestion will be highly appreciated thanks

Answer 1

There isn't a built in way to do this, since presentation and data are separated through CSS and HTML. There are a number of html5 wysiwyg editors that provide this ability

1. wysihtml5
2. bootstrap-wysiwyg
3. raptor editor

and many more

Answer 2

There are a number of different plugins to accomplish what you are asking. For example the TinyMCE jQuery plugin .

Answer 3

If you dont want tinymce style editor then try this one please http://jsfiddle.net/Ys5ZU/2/

I added jquery, but you could do it without it.

$(document).ready(function () {
    $("#change").click(function(){
        $("#text").toggleClass("big");
        $("#text").hasClass("big")?$("#change").val("bold"):$("#change").val("normal")
    });
});