zoukankan      html  css  js  c++  java
  • js 指定位置插入html标签(可编辑div)

    demo效果如下:

    html代码部分如下:

    <!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>
        <title>js获取编辑框游标的位置</title>
        <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
        
        <style type="text/css">
            #Div1, #Div2
            {
                width: 500px;
                height: 100px;
                border: solid 1px black;
            }
        </style>
    </head>
    <body>
    <button type="button" id="ddddd" >
        插入字符
    </button>
    <div contentEditable="true" style="height:50px; border:2px solid red;" id="test">
    dasdsadasdasdasd<img src="http://www.cnblogs.com/images/xml.gif" alt="订阅">dasdasdasdasdsadsa
    </div>
     
    
    </body>
    </html>
    <script>
    $('#ddddd').click(function(){
        document.getElementById('test').focus(); 
        insertHtmlAtCaret('<img src="http://www.cnblogs.com/images/xml.gif" />');
    })
    function insertHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    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);
                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);
        }
    }
    </script>
  • 相关阅读:
    浅谈ASP.NET内部机制(四)
    用正则表达式看.NET编程正则核心对象详解(三 )
    【讨论】对技术的掌握到底应该又多深?
    掌握XML系列(三)创建格式良好的饿XML文档 续编
    浅谈ASP.NET的内部机制(一)
    浅谈ASP.NET内部机制(三)
    浅谈ASP.NET的内部机制(二)
    小工具大智慧
    老生常谈:抽象工厂模式
    又说:程序员的成长过程
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/5670031.html
Copyright © 2011-2022 走看看