Question

我试图使用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>

Answer 1

在IE中，单击跨度会破坏现有选择。当click事件触发时，选择就消失了。

特定于IE的解决方法是使您的跨度unselectable。您可以通过向每个添加unselectable属性来执行此操作：

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

另一种可能性是使用mousedown事件，但是在运行命令后，您的选择仍然会被销毁。

最后，无需创建TextRange并调用其execCommand()方法。您可以致电document.execCommand()。这缩短了代码并使其与所有主流浏览器兼容，而不仅仅是IE：

document.execCommand('bold', false, null);

ContentEditable div中的Exec命令

1 个答案: