文字突出顯示 - 內容編輯

我一直在嘗試javascript中的contenteditable字段。正如你可以猜到的，我試圖建立一個所見即所得的編輯器。把Stack Overflow上的答案拼湊在一起，我設法構建了這個test case。測試案例的工作是手動並以編程方式突出顯示文本並對其進行強化。只有一個小問題。如果您單擊一次「粗體」按鈕，則會突出顯示一個子字符串，然後將其變爲粗體。但是，如果您再次單擊它，它會提示一個錯誤：文字突出顯示 - 內容編輯

"Error: Failed to execute 'setStart' on 'Range': There is no child at offset 12. 
at Error (native) 
at HTMLInputElement.<anonymous> (http://run.jsbin.io/runner:15:13) 
at HTMLDocument.oa (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:18:373) 
at HTMLDocument.c.event.handle (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:55:307) 
at HTMLDocument.j.handle.o (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:49:363)"

的第一次按下按鈕後，代表WYSIWYG編輯器的內容的文本字段包含以下內容：

Some text he<span style="font-weight: bold;">re for y</span>ou to bold

在測試時（通過輸出第一個孩子的長度），我的假設是，它只試圖強調第一部分 - 「他的一些文字」。我相信，進一步的測試，包括評論聲明以鼓勵選擇，證實了這一點。事實上，當這個評論出來時，編輯運作良好。

我在谷歌和Stack Exchange上搜索，但部分原因是我爲什麼會發生這種情況的無知，我什麼也找不到。

因此，我的問題是 - 爲什麼會出現這個錯誤，我該怎麼做才能避免它，並達到我以編程方式突出顯示和插入此文本的目標？

來源

2014-05-08 MemoNick

你爲什麼要給'range.setStart'和'range.setEnd'實數值補償？ – mattsven

只需手動突出顯示由這些值所包圍的部分即可。僅用於實驗/學習的原因。 – MemoNick

-1

參考您的鏈接演示代碼，你設置的範圍內，此代碼：

range.setStart(mainDiv.firstChild, 12); 
range.setEnd(mainDiv.firstChild, 20);

但mainDiv.firstChild是主要div的第一個文本節點。在初始運行文本節點是

Some text here for you to bold

第一次運行該文本節點被分成三塊之後：1之前的大膽，一個大膽的內部，和一個後。

Some text he<span style="font-weight: bold;">re for y</span>ou to bold

所以你mainDiv.firstChild變得

Some text he

爲此調用range.setEnd(mainDiv.firstChild, 20)超出範圍。

爲了避免這種情況，請不要將您的調用硬編碼到setRange。取而代之的是直接從用戶選擇（一種非常常見的情況）或者在進行調用之前檢查實際的DOM之後獲得您的範圍。

來源

2014-06-16 03:11:12 teleclimber

setEnd不是問題，setStart是問題。 –

文字突出顯示 - 內容編輯

回答

相關問題