`

获取div光标并插入图片

    博客分类:
  • js
 
阅读更多
//显示图片
function showImage(div_id,img_src) {
    //IE support  
    if (document.selection) {
    	var myField = document.getElementById(div_id);   //对象   
        var myValue = '<img src = "'+img_src+'"/>';  //值
        myField.focus();
        var sel = document.selection.createRange();
        sel.pasteHTML(myValue);
    }else {
    	var sel = div_range;
    	if(sel == null || sel == 'undefined'){
    		myfocus(div_id);
    		sel = document.getSelection().getRangeAt(0);
    	}
        var img = document.createElement("img");
        img.src = img_src;
        sel.insertNode(img);
    }
}
var div_range;
function divOnmouseout(){
	var sel = document.getSelection();
	if(sel){//ff,ch
		div_range = sel.getRangeAt(0);
	}

//获取焦点
function myfocus(obj) {
    if (typeof obj == 'string') obj = document.getElementById(obj);
    obj.focus();
    if (obj.createTextRange) {//ie
        var rtextRange = obj.createTextRange();
        if(obj.value == null || obj.value == '') return;
        rtextRange.moveStart('character', obj.value.length);
        rtextRange.collapse(true);
        rtextRange.select();
    }else if (obj.selectionStart){//chrome "<input>"、"<textarea>"
        obj.selectionStart = obj.value.length;
    }else if(window.getSelection){
	    var sel = window.getSelection();
	    var tempRange = document.createRange();
	    if(obj.firstChild == null || obj.firstChild == '') return;
	    tempRange.setStart(obj.firstChild, obj.firstChild.length);
	    sel.removeAllRanges();
	    sel.addRange(tempRange);
	}
}
}
分享到:
评论

相关推荐

    在可编辑div中插入文字或图片解决思路与实现步骤

    基本上编辑器或者在线聊天web页面,是不太可能用textarea在做输入框的,因为我们可能要插入图片或者超级链接,因此选择在iframe或者div作为输入框是必须的。 我这里用的是 div. 要使div可编辑 必须 加入 ...

    当div设置contentEditable=true时,重置其内容后无法光标定位

    这个好说… 但是清空完了内容,光标居然跑到了最前面,这就很头疼了。 在经过各种搜索之后,找到了解决办法,不多说,上代码! var _div = document.querySelector('.discuss_area'); var range = document....

    wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    它的一个独特功能是在编辑器失去焦点后,用户仍能在之前的位置插入图片,这在很多编辑器中并不常见。那么,它是如何实现这一功能的呢?本文将深入探讨其背后的实现机制。 首先,我们需要了解在JavaScript中处理文本...

    js 动态获取图片矩形热区,并在热区上添加蒙版,鼠标经过,以半透明形式显示该区域

    在本场景中,我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区,并在热区上添加蒙版效果。热区(Area)是HTML `&lt;map&gt;` 元素的一部分,允许我们在图像上定义可点击的交互区域。 1. **HTML `&lt;img&gt;` 和 `...

    electron+vue实现div contenteditable截图功能.docx

    caret 位置是指光标当前所在的位置,通过获取 caret 位置,可以确定插入表情符号的正确位置。 electron+vue 实现 div contenteditable 截图功能还需要使用到 Bootstrap 框架来美化用户界面。Bootstrap 是一个流行的...

    jQuery评论框插入表情图片代码.zip

    3. **动态光标位置**:为了确保表情插入后光标仍然在正确的位置,需要使用一些JavaScript技巧来获取和设置光标位置,这通常涉及`selectionStart`和`selectionEnd`属性。 4. **jQuery插件化**:如果代码结构良好,...

    Umeditor百度文本编辑器

    2. **丰富的编辑工具栏**:内置多种编辑工具,如字体大小、颜色、对齐方式、插入图片、视频、超链接等,满足多样化的内容创作需求。 3. **Markdown支持**:除了常见的WYSIWYG(所见即所得)编辑模式,还支持Markdown...

    QQ聊天对话框(Js实现,支持表情插入文本中间)

    5. **插入表情**:在JavaScript中,插入表情到文本中的方法是获取输入框的当前选区,然后替换选区内容为表情图片标签。如果用户没有选区,表情则会在光标位置插入。这需要对DOM操作有深入理解,如`range`对象和`...

    设置contenteditable属性可编辑HTML标签的内容(可代替textarea)

    这意味着开发者可以实现富文本编辑器的基本功能,例如插入图片。通过配合JavaScript,我们甚至可以添加更多高级编辑功能,如格式化工具栏、插入链接、创建列表、改变文字样式等。 在实现高度自适应方面,...

    超实用的jQuery代码段

    11.12 获取当前页面的URL并添加样式 11.13 向表格追加一行数据 11.14 获取客户端IP 11.15 向Firebug的控制面板发送消息 11.16 根据不同的屏幕大小显示不同的网页 11.17 jQuery遍历对象的属性 11.18 最优化的循环语句...

    javascript 网页编辑框及拖拽图片的问题

    在本示例中,如果按下回车键(keyCode为13),则会在当前光标位置插入换行符,并将光标移动到下一行的起始位置。 然后,将这个函数绑定到iframe的onkeypress事件中,从而在用户输入时触发相应的逻辑。 2. 拖拽图片...

    XHEditor 例子

    - **丰富的编辑功能**:包括字体设置、字号调整、颜色选择、段落对齐、列表、插入图片、超链接、表格、代码高亮等。 - **实时预览**:编辑内容时可实时预览效果,提高编辑效率。 - **多语言支持**:支持中文、...

    jquery新浪微博表情插件.rar

    这可能涉及到对输入框内容的处理,例如使用`val()`获取和设置值,或者使用`insertAtCaret()`方法在光标位置插入文本。 5. **动画效果**:为了提高用户体验,可以添加一些动画效果,如淡入淡出、滑动等。jQuery提供了...

    输入框jq textarea表情插件特效

    5. **插入表情**:在事件处理函数内部,获取被点击的表情的值,并将其插入到`textarea`的光标位置。这需要利用jQuery的`val()`方法和`caret()`插件(用于获取和设置光标位置)。 6. **动态更新textarea内容**:由于...

    jquery 打开层表情

    4. **插入表情**:当用户点击表情后,需要将其插入到当前光标所在的位置,这通常涉及到对输入框的 DOM 操作。 ```javascript function insertEmoticon(emoticon) { var input = $('textarea'); // 假设表情插入...

    delphi 开发经验技巧宝典源码

    0274 重定义去掉标题栏并最大化窗体 179 0275 使窗体一直居中 179 0276 控制窗体不可移动 180 0277 限制窗体的最大化 180 0278 使窗体自动居中 181 8.5 窗体的特殊形状 181 0279 实现窗体颜色渐变 181...

    Dreamwear设计常用代码 29-33.docx

    然而,具体的关闭实现代码没有在这段文本中给出,通常会使用JavaScript的`getElementById`函数获取到Div元素,然后改变它的`display`属性来控制其可见性。 以上五个代码片段都是Dreamweaver设计过程中可能会用到的...

    delphi 开发经验技巧宝典源码06

    0274 重定义去掉标题栏并最大化窗体 179 0275 使窗体一直居中 179 0276 控制窗体不可移动 180 0277 限制窗体的最大化 180 0278 使窗体自动居中 181 8.5 窗体的特殊形状 181 0279 实现窗体颜色渐变 181...

Global site tag (gtag.js) - Google Analytics