本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:
首先要让DIV启用编辑模式
<div contenteditable=true id="divTest"></div>
2个步骤:
① 获取DIV中的光标位置
② 改变光标位置
var cursor = 0; // 光标位置 document.onselectionchange = function () { var range = document.selection.createRange(); var srcele = range.parentElement();//获取到当前元素 var copy = document.body.createTextRange(); copy.moveToElementText(srcele); for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) { copy.moveStart("character", 1);//改变光标位置,实际上我们是在记录cursor的数量. } }
function moveEnd(obj) { lyTXT1.focus(); var r = document.selection.createRange(); //因为这里死从当前光标开始移动的(好像文本框的是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要的位置了 r.moveStart('character', lyTXT1.innerText.length - cursor); r.collapse(true); r.select(); }
<button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button> <div contentEditable="true" style="height:50px; border:2px solid red;" id="test"> </div> function insertHtmlAtCaret(html) { var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // Range.createContextualFragment() would be useful here but is // non-standard and not supported in all browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); } range.insertNode(frag); // Preserve the selection if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type != "Control") { // IE < 9 document.selection.createRange().pasteHTML(html); } }
再看一个基于jquery的实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>contenteditable</title> <style> *{ margin:0;padding:0; } .im-message-area{ width:98%; padding:2px; height:75px; border:#000 solid 1px; background:#fff; font:12px/20px arial,"5b8b4f53"; word-wrap:break-word; overflow-y:auto; line-height:1; } .ul{display:none;} .ul li{ background-color:#CCC; width:50px; } </style> <script language="javascript" type="text/javascript"> function inimage(text){ var obj= $(".im-message-area")[0]; var range, node; if(!obj.hasfocus) { obj.focus(); } if (window.getSelection && window.getSelection().getRangeAt) { range = window.getSelection().getRangeAt(0); range.collapse(false); node = range.createContextualFragment(text); var c = node.lastChild; range.insertNode(node); if(c){ range.setEndAfter(c); range.setStartAfter(c) } var j = window.getSelection(); j.removeAllRanges(); j.addRange(range); } else if (document.selection && document.selection.createRange) { document.selection.createRange().pasteHTML(text); } } $(document).ready(function(){ $('#button').click(function(){ $('.ul').show(); }) $('.ul li').each(function(){ $(this).click(function(){ inimage($(this).text()); }) }) }); </script> </head> <body> <div contenteditable="true" id="im_message_area" class="im-message-area"><br></div> <a href="javascript:void(0)" id="button">按钮</a> <ul class="ul"> <li>(笑)</li> <li>(哭)</li> <li>(乐)</li> </ul> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
问题内容: 我有一个contenteditable div,需要在插入符号的位置插入文本, 可以通过IE在IE中轻松完成此操作 在Firefox / Chrome中有类似的实现方式吗? 谢谢! 问题答案: 以下功能将在插入符号位置插入文本,并删除现有选择。它适用于所有主流桌面浏览器: 更新 基于注释,下面是一些用于保存和还原选择的代码。在显示上下文菜单之前,应该将返回值存储在一个变量中,然后在隐藏
本文向大家介绍jquery实现在光标位置插入内容的方法,包括了jquery实现在光标位置插入内容的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现在光标位置插入内容的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。
问题内容: 我以这个简单的HTML为例: 我想要简单的事情- 单击按钮时,我想将插入符号(光标)放入可编辑div中的特定位置。通过网络搜索,我将这个JS附加到了按钮单击上,但是它不起作用(FF,Chrome): 是否可以像这样手动设置插入符号的位置? 问题答案: 在大多数浏览器中,您需要和对象。您可以将每个选择边界指定为一个节点,并在该节点内指定一个偏移量。例如,要将插入符号设置为文本第二行的第五
本文向大家介绍JavaScript记录光标在编辑器中位置的实现方法,包括了JavaScript记录光标在编辑器中位置的实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript记录光标在编辑器中位置的实现方法。分享给大家供大家参考,具体如下: 更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧
问题内容: 我有contentEditable元素(可以是p,div,…),我想在其中获得插入符号(光标)的位置。我通常可以通过以下代码来实现: 当元素仅包含文本时,这可以很好地工作。但是,当元素包含某些HTML格式时,返回的位置将相对于所包含HTML元素内的插入符号位置。 假设contentEditable元素的内容是这样的: 如果插入符在inside内,假设在C和D之间,则上面代码返回的位置是
项目中用到了simditor编辑器 https://simditor.tower.im/ 编辑器中扩展了一个插入表情的功能 现在的问题是怎么在内容的任意光标处插入表情,就算用空格或者无内容时,也能正常插入