將文本插入所見即所得的編輯器問題

我的主要問題在於將文本插入到Ajax控件工具包Html Editor的光標位置。這幾天我一直在絞盡腦汁，而我終於在解決問題的最後一站。我將建立一個小環境來更好地描述我的確切問題。將文本插入所見即所得的編輯器問題

我在ASP.Net頁面中使用HtmlEditor，並試圖從DropDownList插入值。我正在使用客戶端JavaScript來觸發selectedindexchanged事件。比方說，例如，我有設計面板在一些文字，像這樣：

123456789 
1234[CaretPosition]56789 
123456789

現在，我想插入變量ddlText恰好在插入位置的點。我的代碼現在的方式，它會將值插入到正確的水平位置，但它似乎忽略了我的選擇在第二行的事實。輸出將如下所示：

1234[ddltext]56789 
123456789 
123456789

請注意我的脫線位置是如何在第二行，但插入的文本出現在第一行。有沒有什麼辦法讓插入功能將文字插入正確的水平和垂直位置？

這是處理插入事件的腳本。

 <script type="text/javascript"> 

      $(document).ready(function() { 
       $('#<%=ddlFields.ClientID%>').change(function() { 
        var ddltext = $('#<%=ddlFields.ClientID%> option:selected').text(); 
        insertText(ddltext) 
       }); 
      }); 

      function insertText(text) { 
       var editorField = document.getElementById('MainContent_Editor1_ctl02_ctl00').contentWindow.document.body.innerHTML; 
       var range = document.getElementById('MainContent_Editor1_ctl02_ctl00').contentWindow.getSelection().getRangeAt(0); 
       var selStart = range.startOffset; 
       var selEnd = range.endOffset; 
       var innerText = editorField.substring(0, selStart) + text + editorField.substring(selEnd, editorField.length); 
       document.getElementById('MainContent_Editor1_ctl02_ctl00').contentWindow.document.body.innerHTML = innerText;           
      } 
    </script>

我一直在抨擊我的頭靠在了一下這一要求，現在，我真的可以使用一雙嶄新的眼睛就可以了。

來源

2012-08-22 Mike Varosky

根據我的要求，我可以通過網絡上的隨機網站獲得很多幫助，從而能夠正常工作。沒有一個網站提供了明確的指導，但從我從幾個中學到的東西，我能夠將Firefox，Chrome和IE中處理此功能的功能拼湊在一起。在ASP.net頁面中使用ajax控件工具包的HTML編輯器對於Opera來說是非常麻煩的，但這超出了我的控制能力。這是我的JavaScript處理問題的要求。值得注意的是，在IE中，您應該更改觸發事件的功能，以觸發mousedown而不是click。希望這個功能有助於彙總圍繞網絡分散的關於該主題的所有信息。

<script type="text/javascript"> 

     $(document).ready(function() { 
      var isMSIE = /*@[email protected]*/false; 
      if (isMSIE == false) { 
       $('#<%=btnAddField.ClientID%>').click(function (event) { 
        event.preventDefault(); 
        insertText($('#<%=ddlFields.ClientID%> option:selected').val()) 
        return false; 
       }); 
      } 
      if (isMSIE == true) { 
       $('#<%=btnAddField.ClientID%>').mousedown(function (event) { 
        event.preventDefault(); 
        insertText($('#<%=ddlFields.ClientID%> option:selected').val()) 
        return false; 
       }); 
      } 
     }); 

     function insertText(text) { 

      var sel, range; 
      if (window.getSelection) { 
       sel = document.getElementById('YourIFramesClientIDGoesHere').contentWindow.getSelection(); 
       var isMSIE = /*@[email protected]*/false; 

       if (sel.rangeCount && isMSIE == false) { 

        range = sel.getRangeAt(0); 
        range.deleteContents(); 
        textNode = document.createTextNode(text); 
        range.insertNode(textNode); 

        range.setStart(textNode, textNode.length); 
        range.setEnd(textNode, textNode.length); 
        sel.removeAllRanges(); 
        sel.addRange(range); 
       } 
      } 
      if (sel.rangeCount && isMSIE == true) { 

       range = document.selection.createRange(); 
       range.pasteHTML(text); 

      } 

     } 
    </script>

來源

2012-08-31 15:02:21

將文本插入所見即所得的編輯器問題

回答

相關問題