1

我试图使用 contenteditable div 创建一个所见即所得的编辑器。我试图使用 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 的解决方法是让您的 spans unselectable。您可以通过将unselectable属性添加到每个：

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

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

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

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