我有一个令人满意的div,我希望能够让用户插入链接,图像或YouTube视频等内容.目前这就是我所拥有的:
function addLink() {
var link = $('#url').val();
$('#editor').focus();
document.execCommand('createLink', false, link);
}
如您所见,用户必须输入单独的文本框才能输入链接地址.因此,当链接添加到编辑器时,它不会添加到指针/插入符所在的位置.
我的问题是如何获取和设置指针/插入符的位置.我已经看到了其他问题,例如设置指针,但是我希望有一个在所有现代浏览器中都支持的解决方案,包括Chrome,Safari,Firefox和IE9 +.
有任何想法吗?谢谢.
编辑:
我发现下面的代码获取位置,但它只根据它所在的行获取位置.例如,如果我有这个(|
光标在哪里):
This is some text And som|e more text
然后我将返回值7,而不是24.
function getPosition() { if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt) { return sel.getRangeAt(0).startOffset; } } return null; }
zer00ne.. 9
现场有大量相关信息.这个适合我和我的客户.
DEMO
/sf/ask/17360801/
function setCaret(line, col) {
var ele = document.getElementById("editable");
var rng = document.createRange();
var sel = window.getSelection();
rng.setStart(ele.childNodes[line], col);
rng.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
ele.focus();
}
///sf/ask/17360801/
var line = document.getElementById('ln').value;
var col = document.getElementById('cl').value;
var btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
var lineSet = parseInt(line, 10);
var colSet = parseInt(col, 10);
setCaret(lineSet, colSet);
}, true);
text text text text text text
text text text text text text
text text text text text text
现场有大量相关信息.这个适合我和我的客户.
DEMO
/sf/ask/17360801/
function setCaret(line, col) {
var ele = document.getElementById("editable");
var rng = document.createRange();
var sel = window.getSelection();
rng.setStart(ele.childNodes[line], col);
rng.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
ele.focus();
}
///sf/ask/17360801/
var line = document.getElementById('ln').value;
var col = document.getElementById('cl').value;
var btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
var lineSet = parseInt(line, 10);
var colSet = parseInt(col, 10);
setCaret(lineSet, colSet);
}, true);
text text text text text text
text text text text text text
text text text text text text