用（或不用）rangy替換內容中的可用字符

我正在研究一個小實驗性編輯器，我希望可視化輸入字符之間的時間。因此，我使用javascript和contenteditable div來包裝每個角色的SPAN和timestamp屬性。我建立一個小的功能與rangy的幫助：用（或不用）rangy替換內容中的可用字符

function insertAtCursor(char, timestamp) { 
    var sel = rangy.getSelection(); 
    var range = sel.rangeCount ? sel.getRangeAt(0) : null; 
    if (range) { 
     var el = document.createElement("span"); 
     $(el).attr('time', timestamp); 
     el.appendChild(document.createTextNode(char)); 
     range.insertNode(el); 
     range.setStartAfter(el); 
     rangy.getSelection().setSingleRange(range); 
    } 
}

現在我面臨兩個問題，這個概念，我希望得到一些幫助：

一個。通過上述功能，輸出以嵌套跨度的形式結束，如下所示：

<span time="12345">a 
    <span time="12345">b 
    <span time="12345">c</span> 
    </span> 
</span>

b。即使我可以運行上面的函數，複製&粘貼或拖動&拖放操作也可能會在一些嵌套的範圍內結束......我想知道是否有辦法避免這種情況？

感謝，安德烈亞斯

來源

2012-02-20 m9dfukc

我不是這個總相信一個好主意，特別是如果文字可以得到很大。一對夫婦的改進：

time也許應該data-time驗證爲HTML5
你需要處理其中一些內容被選擇（加range.deleteContents()會做）的情況。

但是，如果你要做到這一點，我建議檢查是否光標在一個文本節點的現有<span>內結束和文本節點的父之後追加新<span>。事情是這樣的：

現場演示：http://jsfiddle.net/kWL82/1/

代碼：

function insertAtCursor(char, timestamp) { 
    var sel = rangy.getSelection(); 
    var range = sel.rangeCount ? sel.getRangeAt(0) : null; 
    var parent; 
    if (range) { 
     var el = document.createElement("span"); 
     $(el).attr('data-time', timestamp); 
     el.appendChild(document.createTextNode(char)); 

     // Check if the cursor is at the end of the text in an existing span 
     if (range.endContainer.nodeType == 3 
       && (parent = range.endContainer.parentNode) 
       && (parent.tagName == "SPAN")) { 
      range.setStartAfter(parent); 
     } 

     range.insertNode(el); 
     range.setStartAfter(el); 
     rangy.getSelection().setSingleRange(range); 
    } 
}

來源

2012-02-20 16:23:08

用（或不用）rangy替換內容中的可用字符

回答

相關問題