<!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. Vue实现在前端导出Excel 方法2

    也可以去看下我的方法1:https://www.cnblogs.com/yingyigongzi/p/10915382.html ----------------------------------- ...

  2. 进程CPU、内存过高问题查找

    1.定位进程 找出占用CPU最高的10个进程 ps aux | sort -k3nr | head -n 10 查看占用内存最高的10个进程 ps aux | sort -k4nr | head -n ...

  3. BeanUtils使用：从一个map集合中，拷贝到javaBean中（四）

    package beanutil; import java.lang.reflect.InvocationTargetException; import java.util.HashMap; impo ...

  4. BeanUtils低依赖属性拷贝测试（一）

    javabean package entity; import java.util.Date; /** * 一个测试用: * student,javaBean * @author mzy * 一个标准 ...

  5. 自研 Pulsar Starter：winfun-pulsar-spring-boot-starter

    原文:自研 Pulsar Starter:winfun-pulsar-spring-boot-starter 里程碑 版本 功能点 作者 完成 1.0.0 支持PulsarTemplate发送消息&a ...

  6. mysql索引基本介绍

    转载:https://blog.csdn.net/weixin_34392906/article/details/93707682 转载于:https://www.cnblogs.com/maohui ...

  7. Why TypeScript？

    本文经作者授权,翻译总结自 TypeScript Team 的成员 orta 的个人博客 <Understanding TypeScript's Popularity>. 原作者: ort ...

  8. git01_常用命令

    git与github介绍 Git是什么 Git是一个开源的[分布式][版本控制系统],用于敏捷高效地处理任何或小或大的项目 版本控制器 CVS/SVN/Git SVN 客户端/服务器 GIT 客户端/ ...

  9. MySQL——备份与恢复

    MySQL数据库备份和恢复 --备份类型: 1.热备份(只有InnoDB支持)(不影响业务,最好的方式) 2.冷备份( 阻止用户访问) 3.温备份 --备份方式: 1.逻辑备份(文本表示:SQL语句) ...

  10. 被面试官问懵：TCP 四次挥手收到乱序的 FIN 包会如何处理？

    摘要:收到个读者的问题,他在面试的时候,被搞懵了,因为面试官问了他这么一个网络问题. 本文分享自华为云社区<TCP 四次挥手收到乱序的 FIN 包会如何处理?>,作者:小林coding . ...