執行命令在ContentEditable div

我正在嘗試使用contenteditable div創建所見即所得的編輯器。我試圖使用ExecCommand加粗所選文本。這似乎不能正常工作。我已經在IE中進行了測試。這裏是代碼。請幫助我確定程序中是否存在錯誤。執行命令在ContentEditable div

<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>

來源

2013-03-14 Dushyanth

在IE中，點擊一個跨度破壞現有選擇。到click事件發生時，選擇消失了。

IE特定的解決方法是使您的跨度爲unselectable。您可以通過添加unselectable屬性，每個做：

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

另一種可能性是使用mousedown事件代替，但你的選擇將最終仍運行你的命令後遭到破壞。

最後，沒有必要創建一個TextRange並調用它的execCommand()方法。您可以撥打document.execCommand()來代替。這縮短了代碼，並使它與所有主要的瀏覽器，而不是IE兼容：

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

來源

2013-03-14 09:21:42

非常感謝Tim.However我覺得整個詞是大膽的，即使我選擇word.One的一部分，更多的問題是我在IE上運行這個，但期望爲粗體，我無法獲得其他命令標識符，如execCommand的'IDM_CUT'以開始工作。是否有任何特殊原因？ – Dushyanth 2013-03-14 10:59:47

'IDM_CUT'沒有公開給JavaScript接口。這裏有一個'Cut'命令，但是由於安全問題，這在許多瀏覽器中都不起作用（包括IE瀏覽器的一些風格/配置）。 MSDN頁面：http://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx。至於整個單詞加粗，我從來沒有見過。你有一個例子頁面？ – 2013-03-14 11:06:39

您好蒂姆這裏是代碼http://jsfiddle.net/dushyanth/PrrRE/4/。還有一個問題是，我可以在插入位置處插入表格，但問題是我無法在表格後插入下一行。我的意思是插入表格後用戶想要在下面寫入一些內容表格，光標不會去那裏。它總是在表格的最後'td'中。 – Dushyanth 2013-03-15 06:21:26

執行命令在ContentEditable div

回答

相關問題