<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV可编辑框鼠标光标处插入图片或者文字。</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        .editbox {
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            overflow-x: hidden;
            overflow-y: auto;
            outline: none;
        }
    </style>
</head>
<!-- onmousedown="return false" -->
<body>
    <div id="testdiv" contenteditable="true" class="editbox">可以在任意文字后面插入图片或者文字哦！<br /></div>
    <select type="text" id="ipt">
        <option value="haha"></option>
        <option value="hhh"></option>
    </select>
    <input type="button" value="点击插入" id='clc'>
    <script type="text/javascript">
        $(function () {
            $("#clc").click(function () {
                $("#testdiv").focus();
                // var sy = $(".imgbox img").index(this) + 1;
                var val = document.getElementById('ipt').value;
                var img_url = "<span class='cs' contenteditable='false'>" + val + "</span>";
                /*此处如果不是插入图片可这样：
                var img_url = "插入测试的文字";
                */
                _insertimg(img_url);
            })
            //注：如果要插入的是那种“快捷发言，快捷留言”里的文字，只需把那些文字都分别放在A标签里即可，然后img_url=a标签里面的内容。工作中的编辑器终于搞定！能插入图片和快捷发言和表情图片等。
        })
        //锁定编辑器中鼠标光标位置。。
        function _insertimg(str) {
            var selection = window.getSelection ? window.getSelection() : document.selection;
            var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            if (!window.getSelection) {
                document.getElementById('testdiv').focus();
                var selection = window.getSelection ? window.getSelection() : document.selection;
                var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
                range.pasteHTML(str);
                range.collapse(false);
                range.select();
                $('.cs').click(function (e) {
                    console.log(e);
                    $(this).remove();
                })
            } else {
                document.getElementById('testdiv').focus();
                range.collapse(false);
                var hasR = range.createContextualFragment(str);
                var hasR_lastChild = hasR.lastChild;
                while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild
                    .previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
                    var e = hasR_lastChild;
                    hasR_lastChild = hasR_lastChild.previousSibling;
                    hasR.removeChild(e)
                } 
                range.insertNode(hasR);
                if (hasR_lastChild) {
                    range.setEndAfter(hasR_lastChild);
                    range.setStartAfter(hasR_lastChild)
                }
                selection.removeAllRanges();
                selection.addRange(range)
                $('.cs').dblclick(function (e) {
                    console.log(e,new Date());
                    $(this).remove();
                })
            }
        }
    </script>
</body>
</html>

div 可编辑--获取光标位置插入元素的更多相关文章

  1. 【转】怎么给javascript + div编辑框光标位置插入表情文字等？

    最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;amp;lt;img src="https://pic2.zh ...

  2. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  3. 2017-02-20 可编辑div中如何在光标位置添加内容

    之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...

  4. Android EditText获取光标位置并插入字符删除字符

    1.获取光标位置 int index = editText.getSelectionStart(); 2.在光标处插入字符 int index = editText.getSelectionStart ...

  5. js获取光标位置并插入内容

    先来几个网上找的参考资源,我爱互联网,互联网使我变得更加强大. https://blog.csdn.net/mafan121/article/details/78519348 详细篇,该作者很用心的解 ...

  6. js 在光标位置插入内容

    原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...

  7. android EditText获取光标位置并安插字符删除字符

    android EditText获取光标位置并插入字符删除字符1.获取光标位置int index = editText.getSelectionStart(); 2.在光标处插入字符int index ...

  8. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  9. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

随机推荐

  1. 定时执行的任务Quartz.net

  2. jQuery中ajax请求的六种方法（三、二）：$.get()方法

    2.$.get()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  3. 恶意软件开发——内存相关API

    一.前言 Windows操作系统的内存有三种属性,分别为:可读.可写.可执行,并且操作系统将每个进程的内存都隔离开来,当进程运行时,创建一个虚拟的内存空间,系统的内存管理器将虚拟内存空间映射到物理内存 ...

  4. python进阶(20) 正则表达式的超详细使用

    正则表达式   正则表达式(Regular Expression,在代码中常简写为regex. regexp.RE 或re)是预先定义好的一个"规则字符率",通过这个"规 ...

  5. 20210713考试-2021noip14

    T1 队长快跑 #include<bits/stdc++.h> using namespace std; const int N=1e6+5,INF=0x7fffffff; int n,a ...

  6. 专项测试-App性能分析

    专项测试 app性能 Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastRece ...

  7. Spring AOP 事务配置（实现转账事务）

    1. 事务特性 事务特性:ACID 原子性:整体 [原子性是指事务包含的所有操作要么全部成功,要么全部失败] 一致性:数据 [一个事务执行之前和执行之后都必须处于一致性状态] 隔离性:并发 [对于任意 ...

  8. openswan专栏序言

    openswan专栏序言 "一杯茶,一包烟,一个bug解一天!!!". ​ 2020年春季,正值新冠病毒在全球肆虐之际,美国的疫情已经相当的严峻,每天仍以3万速度狂奔.而国内的疫情 ...

  9. ubuntu安装glusterFS

    以2台服务器为例: node1: 172.18.1.10 node2: 172.18.1.20 1) 修改主机名,修改hosts文件添加IP地址映射 hostname node1/node2vim / ...

  10. Windows安装Docker & Docker-Compose & 配置docker私有仓库

    一定要给windows先创建软连接,不然系统盘会爆表的: mklink /j .docker D:\Administrator\.docker Win7安装Docker Dockerfile # FR ...