4

我想做一个简单的文本编辑器，让人们可以将字体设置为粗体、斜体或下划线。我对如何使用 twitter bootstrap 按钮上的“活动”类来切换功能（例如向文本区域中的单词添加不同的字体样式）有点困惑。

这是我的 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>

这是我的 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

我想我需要为每种字体样式设置这样的代码：粗体、斜体、下划线我切换。但是正如你所看到的，我只是将文本加粗是非常冗长的（更不用说不起作用了），所以必须有更好的方法。任何想法将不胜感激。

4

1 回答 1

3

编辑内容的一种更好的方法是使用该contentEditable属性，因为它具有跨浏览器的强大支持，并且execCommand可以执行大量命令 () 来编辑内容，更多信息请参见execCommand.

这是我制作的关于如何进行的简短演示：

演示

相关代码：

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();
    });
});
于 2012-03-16T16:38:20.327 回答