Rangy和IE8 - 在第

末尾處的元素定位插入符號我正在使用Rangy在富文本編輯器（designmode =「on」）中執行多個操作。其中一個功能是粘貼格式化的內容，它可以表示用戶先前創建的某些預定義字符。所有文本內容都保存在段落元素中。用戶可以從這開始：Rangy和IE8 - 在第

<p>The following is a special character: |</p>

其中管（|）是插入位置。然後，他們選擇通過一個按鈕粘貼「特殊」人物之一的編輯器，這結束了：

<p>The following is a special character: <span class="read-only" contenteditable="false">SPECIAL</span>|</p>

該操作使用瘦長在幕後保持插入符號（SelectionSaveRestoreModule）的過程中的位置內部粘貼過程可以在編輯器中對文本進行後粘貼處理，否則可能會混淆遊標的位置。

但是，在IE8中，脫字號不能放在<span>之後，因爲看起來存在一個使其成爲無效位置的錯誤。因此光標出現在<span>元素之前，並且甚至無法使用鍵盤光標控件移動光標後的光標。事實上，它甚至可以防止光標移動到任何後面的段落。

最近幾天我已經嘗試過多種技術，包括在<span>s之後放置多餘的字符，並取得了一些成功。但是，這些額外的字符在用戶出現時顯然會造成混淆，並且不理想。使用零寬度空間在視覺上更好，但在粘貼操作導致問題後試圖整理它們。

我需要一個'整齊'的方法來支持這個用戶對特殊字符的需求，我自由接受我可能會以錯誤的方式接近這個。

來源

2012-07-27 Jason

爲什麼跨度需要是不可編輯的？ – 2012-07-28 11:05:08

不幸的是這是應用程序的要求。有一些預先設置的文本塊，可以通過使用菜單選項和列表添加到可編輯文本中。這是一種超級用戶可以設置特定業務的文本的方式，常規用戶在寫入副本時最終會使用某些元素。對這些塊（在最終輸出副本中可能以非常特定的方式表示）的願望是不可編輯的，並且表現爲如果它們是用於諸如選擇和刪除之類的動作的單個文本元素。 – Jason 2012-07-30 10:18:09

我有一個解決方案似乎在我的測試中工作到目前爲止，但是當我看着它時，它仍然讓我感覺必須有更好的方式（更不用提恐懼感）。

此代碼嘗試執行的操作是在段落末尾的任何只讀跨度之後放置一個零寬度空間。它通過檢查這些元素之後的節點來確定其中是否存在實際的文本。與此同時，它刪除了以前不再需要的檢查中可能仍存在的任何零寬度空間。

var ZWS = '\ufeff'; 

jQuery(_doc.body).find('p').each(function() { 
    var lastContentEditable = undefined; 
    // Look through the root contents of each paragraph to remove no-longer require zws fixes 
    jQuery(this).contents().each(function() { 
     if (this.nodeType === 3) { 
      if (this.nodeValue.indexOf(ZWS) != -1) { 
       // Text node containing a ZWS - remove for now 
       this.nodeValue = this.nodeValue.replace(new RegExp(ZWS, 'g'), ''); 
      } 

      // Does this node now contain text? 
      if (this.nodeValue.length > 0 && lastContentEditable) { 
       // Found text after a read-only node, ergo we do not need to modify that read-only node at the end 
       lastContentEditable = undefined; 
      } 
     } else if (this.nodeType === 1 && this.getAttribute('contenteditable') === "false") { 
      // Indicate that this is currently the last read-only node 
      lastContentEditable = this; 
     } 
    }); 

    if (lastContentEditable) { 
     // It appears that there is a read-only element at the end of the paragraph. 
     // Add the IE8 fix zws after it. 
     var node = document.createTextNode(ZWS); 
     jQuery(lastContentEditable).after(node); 
    } 

});

來源

2012-07-30 11:27:29 Jason

Rangy和IE8 - 在第

回答

相關問題