1

contenteditable div を使用して WYSIWYG エディターを作成しようとしていました。ExecCommand を使用して、選択したテキストを太字にしようとしていましたが、正しく動作していないようです。私はIEでテストしました。コードは次のとおりです。プログラムにエラーがある場合は、エラーを特定するのを手伝ってください。

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  
     type="text/javascript"></script>                 
    <style>
    #rteToolBar span{
     cursor:pointer;
     }
   #rteToolBar span:hover{
     background:#3535ff;
     }
 </style>
</head>


 <div id="rteWrapper"  >
   <div id="rteToolBar" style="border: thin solid black">
     <span role="BOLD" >B</span>
 <span role="ITAL">I</span>
 <span role="TABL">Table</span>  
   </div>
  <div id="rte" contentEditable="true" style="border: thin solid red">
     asdfla sdf asdf asdfas
 fas <b>fasldf</b> asfdsadf<br/>
 asdfla sdf asdf asdfas
 fas fasldf asfdsadf
</div>


var range,rte,caretoffset;
    $(document).ready(function(){
   var rteWrapper = $('#rteWrapper');
   var toolBar = $('#rteToolBar');
       rte = $('#rte');
   $(toolBar).find('span').live('click',function(){
       rte.focus();
       var _this = $(this);
       var role = _this.attr('role');

            switch(role){
          case 'BOLD': 
          var range1 = document.selection.createRange();

         range1.execCommand('bold',false,null);
          break;
          case 'ITAL': 
          break;

          }

    });
     });



 </script>

4

1 に答える 1

2

IEでは、スパンをクリックすると既存の選択が破棄されます。clickイベントが発生するまでに、選択はなくなります。

IE固有の回避策は、スパンを選択できないようにすることです。unselectableこれを行うには、それぞれに属性を追加します。

 <span role="ITAL" unselectable="on">I</span>

もう1つの可能性は、mousedown代わりにイベントを使用することですが、コマンドを実行した後でも、選択内容は破棄されます。

最後に、TextRangeを作成してそのメソッドを呼び出す必要はありませんexecCommand()。代わりに電話することができますdocument.execCommand()。これにより、コードが短縮され、IEだけでなくすべての主要なブラウザと互換性があります。

document.execCommand('bold', false, null);
于 2013-03-14T09:21:42.730 に答える