所見即所得在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