在Kendo Editor中使用rangy

Question

我正在嘗試制作類似Twitter的RTF編輯器，其中突出顯示超出字符數限制的字符。 我看到了這個問題，並嘗試對其進行編輯。

我使用了Kendo UI的Editor和Tim Down的rangy庫。 使用Kendo的內聯編輯器，rangy庫可以很好地工作。

<div contenteditable="true" class="rte"></div>

雖然我需要它在連接到textarea時起作用。

<textarea class="rte" maxlength="50"></textarea>

rangy庫無法像嵌入式編輯器那樣在textarea上工作，可能是因為Kendo為此使用了iframe。 超出限制的字符將突出顯示，但光標會返回到內容的開頭。

有誰知道如何解決這一問題？ 這是我一直在研究的示例： http : //jsfiddle.net/G4jn7/12/

Answer 1

這很容易解決：您只需將editor傳遞到rangy.getSelection()調用中，以告訴它從iframe而不是主文檔中獲取選擇。

演示： http ： //jsfiddle.net/G4jn7/13/

在rangy.getSelection(x) ， x可以是標識要使用的文檔的多種方式之一： Window ， Document ， Document中的<iframe>元素或非iframe元素。