JavaScript將鼠標位置轉換爲選擇範圍

我希望能夠將當前鼠標位置轉換爲一個範圍，特別是在CKEditor中。JavaScript將鼠標位置轉換爲選擇範圍

的CKEditor的提供API，用於根據範圍設置光標：

var ranges = new CKEDITOR.dom.range(editor.document); 
editor.getSelection().selectRanges([ ranges ]);

由於CKEditor的提供這個API，該問題可以通過去除此要求，只是找到一種方法，從生產的範圍被簡化鼠標在包含各種HTML元素的div上進行座標。

但是，這與將texlabrea中的鼠標座標轉換爲光標位置不同，因爲textareas具有固定的列寬和行高，CKEditor通過iframe呈現HTML。

根據this，它看起來像範圍可能應用於元素。

你如何找出最接近當前鼠標位置的開始/結束範圍？

編輯：一個人如何使用ckeditor API來選擇mouseup事件範圍的例子。

editor.document.on('mouseup', function(e) { 
    this.focus(); 
    var node = e.data.$.target; 

    var range = new CKEDITOR.dom.range(this.document); 
    range.setStart(new CKEDITOR.dom.node(node), 0); 
    range.collapse(); 

    var ranges = []; 
    ranges.push(range); 
    this.getSelection().selectRanges(ranges); 
});

與上述例子中的問題是，事件目標節點（e.data。$。目標）僅燒成諸如HTML，BODY，或IMG而不是文本節點的節點。即使是這樣，這些節點也代表了不支持將光標設置到該文本塊內鼠標位置的文本塊。

來源

2011-11-14 mrwrk

這樣做有兩種方式，就像每個所見即所得一樣。

第一張： - 你放棄了，因爲它太硬了，它最終會成爲瀏覽器殺手;

二： - 你試圖分析文本，並把它的確切位置在上面的原半透明的textarea或DIV，但我們這裏有兩個問題：

1）你會如何解析動態數據塊只能得到文本，並確保將其映射到實際內容的確切位置

2）如何解決更新以解析每個鍵入的字符或您在編輯。

最後，這只是一個「DOM樹陰暗面的殘酷奧德賽」，但如果您選擇第二種方式，則比您帖子中的代碼將像魅力一樣工作。

來源

2012-03-28 03:20:45 khael

你想要做的事情在瀏覽器中確實很難。我並不特別喜歡ckeditor，但常規的javascript允許你使用範圍來選擇文本，所以我不認爲它增加了任何特殊的東西。您必須找到包含點擊的瀏覽器元素，然後在單擊元素內找到該字符。檢測瀏覽器元素很簡單：您需要在每個元素上註冊您的處理程序，或者使用事件的目標字段。有很多關於這方面的信息，請問一個關於stackoverflow的更具體的問題，如果這是你遇到的麻煩。

一旦你有元素，你需要找出單元內的哪個字符被點擊，然後創建一個適當的範圍，把光標放在那裏。正如你所說的那樣，瀏覽器的變化使得這真的很難。這個頁面有點過時，但有一個很好的討論範圍：http://www.quirksmode.org/dom/range_intro.html

範圍不能告訴你他們在頁面上的位置，所以你必須使用另一種技術來找出點擊文本的位。

我從來沒有在JavaScript中看到完整的解決方案。幾年前，我曾參與過一個項目，但是我沒有拿出一個我很滿意的答案（一些非常困難的情況）。我使用的方法是一種可怕的黑客攻擊：將跨度插入文本，然後使用它們執行二進制搜索，直到找到包含鼠標單擊的最小可能跨度。跨度不會更改佈局，因此您可以使用跨度的position_x/y屬性找出它們包含的點擊。

E.g.假設您在節點中具有以下文本：

<p>Here is some paragraph text.</p>

我們知道點擊是在本段的某處。將段落分割成一半：

<p><span>Here is some p</span>aragraph text.</p>

如果跨度包含點擊座標，則在該一半中繼續二分搜索，否則搜索下半部分。

這對於單行非常適用，但是如果文本跨越多行，您必須首先查找換行符，或者跨度可以重疊。例如，當點擊不在任何文本上但是在元素中時，您還必須制定該如何操作 - 超過段落最後一行的末尾。

由於我在這個瀏覽器上工作得很快。它們現在可能足夠快，可以在每個字符周圍添加s，然後圍繞每個兩個字符等創建一個易於搜索的二叉樹。你可以嘗試這種方法 - 這會讓你更容易確定你正在處理的是哪一行。

TL; DR這是一個非常困難的問題，如果有答案，它可能不值得您花時間來想出它。

來源

2012-04-15 15:16:27

JavaScript將鼠標位置轉換爲選擇範圍

回答

相關問題