所见即所得在Chrome

我有我的WYSIWYG编辑器出了问题，它的工作原理在FF但不是在Chrome :(所见即所得在Chrome

下面的代码：

$.fn.textEdit = function(){ 
     return this.each(function(){ 
      var $this = $(this), $div = $('<div class="textEdit"></div>'); 

       var $buttonObserve = function(cmd,b,val){ 

        document.execCommand('styleWithCSS', 0, false); 
        document.execCommand(cmd, b||false, val||null); 

       }; 
       $this.before($div); 
       $this.attr({contentEditable:true}) 

       $($div).append(
         $('<div/>').addClass('textEditBold').text('F').attr('title','Fett') 
          .click(function(){ $buttonObserve('bold') }) 
        ).append(
         $('<div/>').addClass('textEditItalics').text('K').attr('title','Kursiv') 
          .click(function(){ $buttonObserve('italic') }) 
        ).append(
         $('<div/>').addClass('textEditUnderline transparent').text('_').attr('title','Unterstrich').css('background', 'url(data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7) no-repeat 0 1px') 
          .click(function(){ $buttonObserve('underline') }) 
        ).append(
         $('<div/>').addClass('delete').text('Deactivate-Edit').attr('title','Stop-Edit') 
          .click(function(){ $this.parents('#page2').find('.editable').removeClass('editable').removeAttr('contentEditable'); 
               $this.parents('#page2').find('.textEdit').remove('.textEdit'); }) 
       ); 

     }); 



};

此功能，如果用户点击得到激活一个p，div elemt等等，它会创建4个按钮，用于使文本：粗体，斜体，下划线，或删除按钮。

问题是：如果我选择文本并按下按钮，发生，只是删除按钮的作品。

我认为Chrome不接受我选择的文本。

我希望你们能帮助我！ :)

来源

2013-03-05 Chris Norris