4

I'd like to make a simple text editor to allow people to make the font bold, italicized or underlined. I'm a little confused on how to use the "active" class on twitter bootstrap's buttons to toggle functions such as adding different font styles to words in a textarea.

Here's my HTML:

<span class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn btn-bold">Bold</button>
  <button class="btn btn-italics">Italics</button>
  <button class="btn btn-underline">Underline</button>
</span>    

<textarea></textarea>

here's my JS:

        $('.btn').click(function(){         
          if($('.btn-bold').hasClass('active')){                
            $('.btn-bold').toggle(
                 function() {
                     $('textarea').val($('textarea').val()+"<span style='font-weight:bold'>");}, 
                 function() {                     
                     $('textarea').val($('textarea').val()+"</span>");
            }); //toggle
          } //if
        });  //click

I think i need to have code like this for each font-style: bold, italics, underline I toggle. But as you can see what I have for just making text bold is quite verbose (not to mention doesn't work) so there has to be a better way. Any thoughts would be greatly appreciated.

user229044
  • 232,980
  • 40
  • 330
  • 338
tim peterson
  • 23,653
  • 59
  • 177
  • 299
  • You want to add formatting inside a textarea? – Andres I Perez Mar 15 '12 at 22:15
  • I want to add formatting somewhere, i put it in the textarea in the example above just to keep it simple, i'd like to be able to click the bold button and produce html like this... this is not bolded this is BOLD – tim peterson Mar 15 '12 at 23:01
  • So you would like to toggle the active class on the button when pressed? and remove the formatting at the same time? – Andres I Perez Mar 16 '12 at 14:54
  • hi Andres, the active class is already toggled when you click the button, this is provided by using bootstrap, I just want to detect the active class as the trigger to add/remove the formatting, though really it needs to detect the active class plus something else otherwise there would be no way to tell whether the bold, italics, or underlined button was pressed – tim peterson Mar 16 '12 at 15:54
  • Is another method than what you posted above ok? You can easily get the desired effect working by using the `contentEditable` property. – Andres I Perez Mar 16 '12 at 16:04
  • hi Andres, of course all methods are welcome, i'd just like to solve the problem! `contentEditable` works in all browsers? – tim peterson Mar 16 '12 at 16:19
  • All the way back to internet explorer 5.5 it works :) [here is a chart](http://www.quirksmode.org/dom/execCommand.html). – Andres I Perez Mar 16 '12 at 16:32

1 Answers1

3

A better way to go about editing content would be to use the contentEditable attribute, since it has a great support across browsers and a great selection of commands (execCommand) one can execute to edit content out, more information here on the execCommand.

Here is a short demo i made about how to go about it:

Demo

Relevant code:

JS

var current;
$(function() {
    $("div[contenteditable]").focus(function() {
        current = this;
    });

    // bold
    $('.btn-bold').click(function() {
        document.execCommand('bold', false, null);
        $(current).contents().focus();
    });

    //italics
    $('.btn-italics').click(function() {
        document.execCommand('italic', false, null);
        $(current).contents().focus();
    });

    //underline
    $('.btn-underline').click(function() {
        document.execCommand('underline', false, null);
        $(current).contents().focus();
    });
});
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • hi Andres, this is really awesome! wow, I am very grateful for this help, it is exactly what I needed! thank you! – tim peterson Mar 16 '12 at 16:45
  • Andres, forgot one question, how do I make this contentEditable DIV be submitted as along with my form (like a input/textarea) so that I can store the content in my DB? Do DIVs support the name attribute? – tim peterson Mar 16 '12 at 17:00
  • @timpeterson you can enclose the contentEditable div inside a form and submit that to your programming language of choice. – Andres I Perez Mar 16 '12 at 17:34
  • yep, that's what i did: i just put it inside the form and populated a hidden textarea with the contentEditable div contents, thanks again – tim peterson Mar 16 '12 at 23:56