向html编辑器光标所在处插入图片

xmq_666

于 2011-03-17 16:14:00 发布

阅读量3.5k

点赞数

分类专栏： JavaScript 文章标签： html insert character null border

本文链接：https://blog.csdn.net/xmq_666/article/details/6256620

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在HTML编辑器中定位到光标所在位置，并实现精确地插入图片。无论是在富文本框还是其他类型的HTML编辑器中，理解如何操作光标并插入内容对于网页编辑至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<textarea id="content" name="content" style="display:none"></textarea>
<iframe id="myEditor" src="Edit/editor.htm?id=contentReadCookie=1" frameborder="0" scrolling="no" width="621" height="457"></iframe>
 
<script>
function insertHTMLToEditor(imgurl){
        var myEditor = document.getElementById("myEditor").contentWindow,
        doc = myEditor.document, r = doc.selection ? doc.selection.createRange() : null;
        myEditor.focus();
        doc.execCommand("insertImage", false, "Insert_Area_Id");
        var code = doc.body.innerHTML;
        code = code.replace(/(src="Insert_Area_Id")/ig,'id="Insert_Area_Id"');
        try {doc.body.innerHTML = code}catch(e){return false}
        if(r!=null){
                try {r.move("character");r.select()}
                catch(e){}
        };
        var insertcodes = '<img src="'+imgurl+'" border="0">';
        var s = doc.body.appendChild(doc.createElement("nobr"));
        s.innerHTML = insertcodes;
        var o = doc.getElementById("Insert_Area_Id");
        o.parentNode.replaceChild(s,o);
        myEditor.focus();
}
</script>