js-当contenteditable="true时,如何给光标位置插入HTML元素

问题描述

当contenteditable="true时,如何给光标位置插入HTML元素

现在项目中遇到一个这样的问题:
一个div的contenteditable设置为True时,在输入了一段文字后,列入

现在需要做的是,点击表情框,这个时候焦点会离开这个div,然后选择一个表情,将这个表情插入到原来的光标的位置。

请问各位大神 .... 这一步应该如何做到?

解决方案

因为涉及到DOM Range 在网上浏览了很多这方面的东西 仍然没有解决 .

解决方案二:

http://stackoverflow.com/questions/2920150/insert-text-at-cursor-in-a-content-editable-div

解决方案三:

你是要做一个富文本编辑器吗?在可编辑的div里的每一行(除了第一行)都是一个div,所以你可以先取得所在的div,
然后在所在行的位置你可以搜一下获取的方法,将其记录下来,最后点击图标之后,通过操作div的innerHTML插入表情

解决方案四:

因为涉及到DOM Range 在网上浏览了很多这方面的东西 仍然没有解决 .

时间: 2024-11-01 22:55:43

js-当contenteditable="true时,如何给光标位置插入HTML元素的相关文章

解释一段在光标位置插入字符的js代码

js|插入|光标 这篇小文本来应该在昨天发的,但是由于我昨天敲错了一个键(就是IBM笔记本键盘上的前进后退),导致文章丢失...今天就简写了.网络上有许多能在光标位置插入字符的js代码,比较啰嗦,不适合讲解.我写了一段简单的代码,解释一下: 1234567 <FORM> <TEXTAREA NAME="a" ONSELECT="this.pos=document.selection.createRange();"  onKEYUP="th

JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)_javascript技巧

本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法.分享给大家供大家参考,具体如下: <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"> <input type="button" onclick=

JS在可编辑的div中的光标位置插入内容的方法

 首先要让DIV启用编辑模式 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置.   2个步骤: ① 获取DIV中的光标位置 ② 改变光标位置 代码如下: var cursor = 0; // 光标位置  document.onselectionchange

JS在可编辑的div中的光标位置插入内容的方法_javascript技巧

本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

html-jquery-1.9.1下contenteditable=&amp;amp;quot;true&amp;amp;quot;可写但不可修改

问题描述 jquery-1.9.1下contenteditable="true"可写但不可修改 如题,今天写页面时,想使div可编辑,添加了属性contenteditable="true",然后访问页面后,可以写入内容,但是不可以删除,经过测试,发现是因为我引用了jquery-1.9.1.js文件.该怎么解决啊....求大神!!!

ie 8-关于ie8下div变为可编辑状态的问题,contenteditable=&amp;amp;quot;true&amp;amp;quot;???

问题描述 关于ie8下div变为可编辑状态的问题,contenteditable="true"??? 其他浏览器可以正常删除图片(包括ie6.7),但ie8就不行,我给图片设置了display:block才可以,问题是块级元素玩个毛线啊,请求解决方法??? 请在ietester中测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JS在TextArea光标位置插入文字并实现移动光标到文字末尾_javascript技巧

=IE支持document.selection =Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性 复制代码 代码如下: function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart

textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)_表单特效

先在本文框中点鼠标以确定光标位置.

servlet-Java新人求解答:用js实现关闭或刷新页面时如何保存更改信息?

问题描述 Java新人求解答:用js实现关闭或刷新页面时如何保存更改信息? 如题,我做了一个网站,如下代码,现在的问题是网站可以修改,但是一旦刷新或重新登录后又恢复原状了. 请问改写什么代码才能保存网页修改的信息? <%@ page import ="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path