文档章节

JS在可编辑的div中的光标位置插入内容或表情

深圳大道
 深圳大道
发布于 2016/12/29 15:33
字数 134
阅读 19
收藏 0
<input type="button" value="插入字符" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');" />
<div contenteditable="true" style="height:50px; border:2px solid red;" id="test"> </div>
<script type="text/javascript">
    function insertHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                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);
                // Preserve the selection
                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>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/53642082

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
div+contenteditable 实现富文本发布框的小结

效果图和实现的功能 实现的效果图如下,主要实现的功能有 表情的插入 插入话题之后部分文字选中 文本框高度自适应 发送消息,获取发送框中的纯文本内容 placeholder的实现 输入文字的计数面板...

我的孫女叫小芳
03/11
0
0
sublime text2快捷键

最让人惊呆的是和notepad一样的速度功能比eclipse还强大。 多点编辑eclipse没有, ctrl+p比Eclipse的ctrl+shift+r还好用, ctrl+shift+p虽然eclipse也有但是,  ctrl+d就是eclipse重命名变量的...

cyper
2015/07/15
33
1
在div文本区域,光标位置处插入

需求背景:利用div的contentEditable="true",可编辑区域,插入一些标签包含文本,非纯文本格式, vue 项目中我是使用v-html渲染,v-model无法达到我们的需求 demo效果 js api document.acti...

不负好时光
2018/08/29
682
0
Sublime Text工具使用

安装Sublime Text 3 官网下载 选择对应的版本安装。完事后,要安装一个基础的、必备的包管理:Package Control,用来以后安装插件用的。 安装指导 https://sublime.wbond.net/installation 打...

hank_leo
2018/08/31
0
0
Notepad++结合Zen Coding快速编写HTML代码

Notepad++结合Zen Coding快速编写HTML代码 By Airen Apr05,11

^6^|^6^
2011/11/02
586
1

没有更多内容

加载失败,请刷新页面

加载更多

iota硬件集成实战教程

本教程面向iota初学者,我们将学习如何开发基于指定IOTA地址的余额来闭合或断开一个连接到树莓派上的继电器,点亮或熄灭LED。教程虽然简单,但足以展示IOTA的强大能力。 我们将使用一个联网的...

汇智网教程
12分钟前
2
0
influxdb-1.7.8绿色安装-centos7

influxdb作为一款性能强悍的时序数据库, 一旦拥有, 别无所求. 本文介绍它的绿色安装方法. 环境准备, 下载, 解压. [dev5@7bdc6644c7c4 influxdb-1.7.8] cat /etc/redhat-release CentOS Linu...

dev5
15分钟前
1
0
Java 11 新特性

java 11 是继 java8 之后的第一个LTS版本。因此有必要针对它进行一些深入的学习,虽然短时间内java8 还是主流版本。当然,如果从java8基础上升级,几乎可以确定目标就是java11。 同时也要明确...

polly
17分钟前
1
0
SVG

本文转载于:专业的前端网站➯SVG SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG 使用 XML 编写。 一、什么是SVG? SVG 指可伸缩矢量图形,使用 XML 格式定义图形,SVG图像在放大或改...

前端老手
18分钟前
2
0
zabbix server proxy

server./configure --prefix=/data/zabbix3.4 --enable-server --enable-agent --with-net-snmp --with-libcurl --enable-proxy --with-mysql=/data/mysql-5.6.44-linux-glibc2.12-x8......

雁南飞丶
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部