div设置contentEditable="true"作为文本编辑器，定位光标解决办法，急求!

fdsfsd3242 2013-12-27 10:58:55
div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
...全文
34550 46 打赏 收藏 转发到动态 举报
写回复
用AI写文章
46 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq378337250 2014-12-13
  • 打赏
  • 举报
 回复
<div style="width:100px;height:100px;background:red;"></div>
XYYH-Sword 2014-12-03
  • 打赏
  • 举报
 回复 

function set_focus(el)
{
	el=el[0];  // jquery 对象转dom对象
	el.focus();
	if($.browser.msie)
	{
		var rng;
		el.focus();
		rng = document.selection.createRange();
		rng.moveStart('character', -el.innerText.length);
		var text = rng.text;
		for (var i = 0; i < el.innerText.length; i++) {
			if (el.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length)) {
				result = i + 1;
			}
		}
    }
	else
	{
		var range = document.createRange();
		range.selectNodeContents(el);
		range.collapse(false);
		var sel = window.getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
    }
}
这个方法可以让光标定到最后，参数是目标jquey对象
XYYH-Sword 2014-12-03
  • 打赏
  • 举报
 回复
感谢楼上的精彩问答，我的问题也已经解决了
allali 2013-12-31
  • 打赏
  • 举报
 回复
引用 42 楼 u013260447 的回复:
[quote=引用 41 楼 MengYouXuanLv 的回复:] [quote=引用 40 楼 MengYouXuanLv 的回复:] [quote=引用 39 楼 u013260447 的回复:] [quote=引用 38 楼 MengYouXuanLv 的回复:] [quote=引用 37 楼 u013260447 的回复:] [quote=引用 31 楼 MengYouXuanLv 的回复:] [quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下如果最后一个是图片，焦点老是到不了他的后面，总是在他的前面[/quote]

function saveRange(){
            var selection= window.getSelection ? window.getSelection() : document.selection;
            var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            _range = range;
            if (!window.getSelection){
                var o = document.getElementById('o');
                if(o.lastChild && o.lastChild.tagName == "IMG"){
                    o.appendChild(document.createTextNode("\n"));
                }
            }
        }
[/quote] 麻烦大神帮我看一下，我在别的网页随便粘贴的时候，复制到我的比编辑器里面，我以前的文本就没有了，麻烦大神帮我解决一下哦，解决完了这个问题就ok了，200分都给你了，十分感谢[/quote] pasteHandler会把所有图片清掉[/quote]
content=content.replace(/_moz_dirty=""/gi, "")
                content=content.replace(/\[/g, "[[-")
                content=content.replace(/\]/g, "-]]")
                content=content.replace(/<\/ ?tr[^>]*>/gi, "
")
                content=content.replace(/<\/ ?td[^>]*>/gi, "  ")
                content=content.replace(/<(ul|dl|ol)[^>]*>/gi, "
")
                content=content.replace(/<(li|dd)[^>]*>/gi, "
")
                content=content.replace(/<p [^>]*>/gi, "
")
                content=content.replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]")
                content=content.replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]")
//                content=content.replace(/<[^>]*>/g, "")
                content=content.replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]");
                content=content.replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
加注释的部分会把都有标签去掉[/quote] 去掉注释的话，会把他的代码也粘贴过来，这样就起不到过滤效果了，大神有什么办法过滤粘贴过来的呢？[/quote]

//监控粘贴(ctrl+v),如果是粘贴过来的东东，则替换多余的html代码，只保留<br>
        function pasteHandler(event){
            setTimeout(function(){
                var content = document.getElementById("o").innerHTML;
                valiHTML=["br"];
                content = content.replace(/(<[^>]*>)/g,function($0,$1){
                    if(/<img[^>]*>/gi.test($1)){
                        return $1;
                    }else {
                        return "";
                    }
                });
                if(!/firefox/.test(navigator.userAgent.toLowerCase())){
                    content=content.replace(/\r?\n/gi, "<br>");
                }
                document.getElementById("o").innerHTML=content;
                saveRange();
            },1)
        }
allali 2013-12-30
  • 打赏
  • 举报
 回复
引用 40 楼 MengYouXuanLv 的回复:
[quote=引用 39 楼 u013260447 的回复:] [quote=引用 38 楼 MengYouXuanLv 的回复:] [quote=引用 37 楼 u013260447 的回复:] [quote=引用 31 楼 MengYouXuanLv 的回复:] [quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下如果最后一个是图片，焦点老是到不了他的后面，总是在他的前面[/quote]

function saveRange(){
            var selection= window.getSelection ? window.getSelection() : document.selection;
            var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            _range = range;
            if (!window.getSelection){
                var o = document.getElementById('o');
                if(o.lastChild && o.lastChild.tagName == "IMG"){
                    o.appendChild(document.createTextNode("\n"));
                }
            }
        }
[/quote] 麻烦大神帮我看一下，我在别的网页随便粘贴的时候，复制到我的比编辑器里面，我以前的文本就没有了，麻烦大神帮我解决一下哦，解决完了这个问题就ok了，200分都给你了，十分感谢[/quote] pasteHandler会把所有图片清掉[/quote]
content=content.replace(/_moz_dirty=""/gi, "")
                content=content.replace(/\[/g, "[[-")
                content=content.replace(/\]/g, "-]]")
                content=content.replace(/<\/ ?tr[^>]*>/gi, "
")
                content=content.replace(/<\/ ?td[^>]*>/gi, "  ")
                content=content.replace(/<(ul|dl|ol)[^>]*>/gi, "
")
                content=content.replace(/<(li|dd)[^>]*>/gi, "
")
                content=content.replace(/<p [^>]*>/gi, "
")
                content=content.replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]")
                content=content.replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]")
//                content=content.replace(/<[^>]*>/g, "")
                content=content.replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]");
                content=content.replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
加注释的部分会把都有标签去掉
allali 2013-12-30
  • 打赏
  • 举报
 回复
引用 39 楼 u013260447 的回复:
[quote=引用 38 楼 MengYouXuanLv 的回复:] [quote=引用 37 楼 u013260447 的回复:] [quote=引用 31 楼 MengYouXuanLv 的回复:] [quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下如果最后一个是图片，焦点老是到不了他的后面，总是在他的前面[/quote]

function saveRange(){
            var selection= window.getSelection ? window.getSelection() : document.selection;
            var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            _range = range;
            if (!window.getSelection){
                var o = document.getElementById('o');
                if(o.lastChild && o.lastChild.tagName == "IMG"){
                    o.appendChild(document.createTextNode("\n"));
                }
            }
        }
[/quote] 麻烦大神帮我看一下，我在别的网页随便粘贴的时候，复制到我的比编辑器里面，我以前的文本就没有了，麻烦大神帮我解决一下哦，解决完了这个问题就ok了，200分都给你了，十分感谢[/quote] pasteHandler会把所有图片清掉
fdsfsd3242 2013-12-30
  • 打赏
  • 举报
 回复
引用 41 楼 MengYouXuanLv 的回复:
[quote=引用 40 楼 MengYouXuanLv 的回复:] [quote=引用 39 楼 u013260447 的回复:] [quote=引用 38 楼 MengYouXuanLv 的回复:] [quote=引用 37 楼 u013260447 的回复:] [quote=引用 31 楼 MengYouXuanLv 的回复:] [quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下如果最后一个是图片，焦点老是到不了他的后面，总是在他的前面[/quote]

function saveRange(){
            var selection= window.getSelection ? window.getSelection() : document.selection;
            var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            _range = range;
            if (!window.getSelection){
                var o = document.getElementById('o');
                if(o.lastChild && o.lastChild.tagName == "IMG"){
                    o.appendChild(document.createTextNode("\n"));
                }
            }
        }
[/quote] 麻烦大神帮我看一下，我在别的网页随便粘贴的时候，复制到我的比编辑器里面，我以前的文本就没有了，麻烦大神帮我解决一下哦，解决完了这个问题就ok了，200分都给你了，十分感谢[/quote] pasteHandler会把所有图片清掉[/quote]
content=content.replace(/_moz_dirty=""/gi, "")
                content=content.replace(/\[/g, "[[-")
                content=content.replace(/\]/g, "-]]")
                content=content.replace(/<\/ ?tr[^>]*>/gi, "
")
                content=content.replace(/<\/ ?td[^>]*>/gi, "  ")
                content=content.replace(/<(ul|dl|ol)[^>]*>/gi, "
")
                content=content.replace(/<(li|dd)[^>]*>/gi, "
")
                content=content.replace(/<p [^>]*>/gi, "
")
                content=content.replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]")
                content=content.replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]")
//                content=content.replace(/<[^>]*>/g, "")
                content=content.replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]");
                content=content.replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
加注释的部分会把都有标签去掉[/quote] 去掉注释的话，会把他的代码也粘贴过来，这样就起不到过滤效果了，大神有什么办法过滤粘贴过来的呢？
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 12 楼 kk86868058 的回复:
可是你是通过数组join合并而成的字符串,用+号运算连接看看
哪里呢？前辈贴一下代码
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 7 楼 hch126163 的回复:
楼主可以考虑用iframe 很多在线编辑器都是 iframe. 鼠标点击别的位置的时候(不在div里面)再点击插入图片按钮，会跨域插入到别的地方 你需要在插入前，判断触发事件的源【dom】是否你需要插入的div,或者div 的子节点
前辈写的那个iframe有Bug，在ie下失去焦点之后点击插入图片，总是插入到最前面，火狐下插入图片之后立马失去了焦点，需要再点击编辑器才能插入，insertImg方法参数能不能改成传入一个<img>标签或者是src，去掉插入图片链接那些，只要能插入图片就好
K-dash 2013-12-28
  • 打赏
  • 举报
 回复
可是你是通过数组join合并而成的字符串,用+号运算连接看看
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 10 楼 kk86868058 的回复:
其实光标定位本身没有问题的,主要是你外部那个字符串用了数组join进去 你试试直接 弄个字符串标签进去相信就在光标后面了,个中原因我也不明白,但某同事上两周就是这样解决了问题
添加进去的就是标签字符串
K-dash 2013-12-28
  • 打赏
  • 举报
 回复
其实光标定位本身没有问题的,主要是你外部那个字符串用了数组join进去 你试试直接 弄个字符串标签进去相信就在光标后面了,个中原因我也不明白,但某同事上两周就是这样解决了问题
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 4 楼 u010719640 的回复:
[quote=引用 3 楼 u013260447 的回复:] 这种处理光标位置问题有bug,在ie还是没办法解决，在别的有浏览器下，点击空白的地方再插入图片的时候，会把图片插入到别的地方，而不是div编辑器中
你还没用这个引用吧！而且发帖注意格式。你用的是IE几啊，这是html5的标签，IE6是不支持的[/quote] 前辈有没有办法哦
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 7 楼 hch126163 的回复:
楼主可以考虑用iframe 很多在线编辑器都是 iframe. 鼠标点击别的位置的时候(不在div里面)再点击插入图片按钮，会跨域插入到别的地方 你需要在插入前，判断触发事件的源【dom】是否你需要插入的div,或者div 的子节点
前辈给我一个iframe过滤粘贴的或者标签怎么办，能否给我一份？
Deep_Learning 2013-12-28
  • 打赏
  • 举报
 回复
引用 6 楼 u013260447 的回复:
[quote=引用 4 楼 u010719640 的回复:]
[quote=引用 3 楼 u013260447 的回复:]
这种处理光标位置问题有bug,在ie还是没办法解决，在别的有浏览器下，点击空白的地方再插入图片的时候，会把图片插入到别的地方，而不是div编辑器中


你还没用这个引用吧！而且发帖注意格式。你用的是IE几啊，这是html5的标签，IE6是不支持的[/quote]

前辈有没有办法哦[/quote]
我在谷歌浏览器中可以啊。不过点击查看是一直累加的。
hch126163 2013-12-28
  • 打赏
  • 举报
 回复
楼主可以考虑用iframe 很多在线编辑器都是 iframe. 鼠标点击别的位置的时候(不在div里面)再点击插入图片按钮，会跨域插入到别的地方 你需要在插入前，判断触发事件的源【dom】是否你需要插入的div,或者div 的子节点
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 38 楼 MengYouXuanLv 的回复:
[quote=引用 37 楼 u013260447 的回复:] [quote=引用 31 楼 MengYouXuanLv 的回复:] [quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下如果最后一个是图片，焦点老是到不了他的后面，总是在他的前面[/quote]

function saveRange(){
            var selection= window.getSelection ? window.getSelection() : document.selection;
            var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            _range = range;
            if (!window.getSelection){
                var o = document.getElementById('o');
                if(o.lastChild && o.lastChild.tagName == "IMG"){
                    o.appendChild(document.createTextNode("\n"));
                }
            }
        }
[/quote] 麻烦大神帮我看一下，我在别的网页随便粘贴的时候，复制到我的比编辑器里面，我以前的文本就没有了，麻烦大神帮我解决一下哦，解决完了这个问题就ok了，200分都给你了，十分感谢
allali 2013-12-28
  • 打赏
  • 举报
 回复
引用 37 楼 u013260447 的回复:
[quote=引用 31 楼 MengYouXuanLv 的回复:] [quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下如果最后一个是图片，焦点老是到不了他的后面，总是在他的前面[/quote]

function saveRange(){
            var selection= window.getSelection ? window.getSelection() : document.selection;
            var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            _range = range;
            if (!window.getSelection){
                var o = document.getElementById('o');
                if(o.lastChild && o.lastChild.tagName == "IMG"){
                    o.appendChild(document.createTextNode("\n"));
                }
            }
        }
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 31 楼 MengYouXuanLv 的回复:
[quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下如果最后一个是图片，焦点老是到不了他的后面，总是在他的前面
fdsfsd3242 2013-12-28
  • 打赏
  • 举报
 回复
引用 34 楼 MengYouXuanLv 的回复:
[quote=引用 33 楼 u013260447 的回复:] [quote=引用 31 楼 MengYouXuanLv 的回复:] [quote=引用 30 楼 MengYouXuanLv 的回复:] [quote=引用 楼主 u013260447 的回复:] div作为编辑器的时候，插入表情或者图片的时候总是插入到文本的最前面，怎样可以像百度贴吧发帖子那样准确的定位光标，再插入表情的时候，能根据你当前的光标插入，百度贴吧用的就是div作为文本编辑器，哪位知道怎么解决，查询了很多的办法，总是有很多的Bug，不能准确的定位光标的位置，急求，各位有什么好的办法，麻烦告诉一下。
火狐上图片是加上去了 没显示 看看能不能调样式调出来[/quote]图片存在的时候能显示出来[/quote] ie下在有图片的时候光标不能选择位置，一直是在最前面，通过键盘左右键调节的时候，最多调节到最后一张图片的前面，大神看看这是怎么回事呢，ie8下测试的[/quote] 百度帖吧最后追加了 空文本节点 不知道怎么加上去的[/quote] 我在传入的这个"<img></img> "标签后面加上一个空格怎么样？
加载更多回复（25）
当div设置contentEditable=true时,重置其内容后无法光标定位
最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性就首当其冲了，结果，问题来了… 首先 评论区 长这样：   当输入内容超过限制的时候，清空用户输入超过限制后的内容。   这个好说… 但是清空完了内容，光标居然跑到了最前面，这就很头疼了。 在经过各种搜索之后，找到了解决办法，不多说，上代码！ var _div = document.querySelector('.discuss_area'); var range = document.createRange(); range.selectNodeContents(_div); range.collapse(
Vue中div contenteditable 的光标定位方法
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari obj.focus(); //解决ff不获取焦点无法定位问题 var ra
用div的contenteditable = true做文本编辑器 光标的设置方法
用div的contenteditable = true做文本编辑器的方法 function set_focus(el) {   el=el[0];  // jquery 对象转dom对象   el.focus();   if($.browser.msie){   //上面是ie的写法 var rng;   el.focus();   rng = document.s
解决当div设置contentEditable=“true“时，重置其内容后无法光标正确定位。
最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性就首当其冲了，结果，问题来了… 首先 评论区 长这样： 当输入内容超过限制的时候，清空用户输入超过限制后的内容。 这个好说… 但是清空完了内容，光标居然跑到了最前面，这就很头疼了。 在经过各种搜索之后，找到了解决办法，不多说，上代码！ var _div = document.querySelector('.di...
div设置contentEditable="true"作为文本编辑器，定位光标解决办法
比如你会在div中插入表情，也可能输入文字，这时候，你可能需要定位光标的位置，默认不处理的情况下，div的光标是定位在文字后面，而你插入一个img标签，光标是不会跟随移动的！解决办法： function set_focus(el) { el=el[0];  // jquery 对象转dom对象 el.focus(); if($.browser.msie) { var rng;
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章