`

DIV可编辑模式在光标位置插入内容

    博客分类:
  • web
 
阅读更多

当我们做一个聊天对话框时,可能想要支持图片发送或表情,而且我们希望表情和图片都以图片方式呈现在输入框内,这时,textarea就不管用了,因为它只支持纯文本。

我们可以利用div的contentEditable="true"属性设置,使DIV可编辑,这样,div中就可以追加图片。

我们插入表情时,需要先点击输入框上方或下方给的一个表情按钮,从而弹出一个浮动层,里面是各种表情,点击表情,即可将表情放到DIV中光标所在位置。

但有一个问题是:如果发送表情,是可能需要将表情插入到文本中间,而非文本末尾。而当我们点击表情按钮时,会导致DIV失去焦点,从而导致表情只能追加到文本末尾。

别担心,这个问题也可以解决,我们给表情按钮以及弹出的表情列表层最外层元素都增加两个HTML属性即可。

属性是:unselectable="on" onmousedown="return false;"

 然后再来的问题就是,如何能将选择到的元素插入到可编辑div中的光标位置呢?我在百度上搜索,找到了解决办法:

 

function insertAtCursor(dom, html) {
	if (dom != document.activeElement) { // 如果dom没有获取到焦点,追加
		dom.innerHTML = dom.innerHTML + html;
		return;
	}
	var sel, range;
	if (window.getSelection) {
		// IE9 或 非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);
	}
}

 

另外再给一份针对texterea中在光标位置插入Text内容的代码:

function insertValueAtCursor(myField, insertContent) 
{
    if (myField != document.activeElement) {
        myField.value = myField.value + insertContent;
        return;
    }
    //IE support
    if (document.selection) 
    {
        myField.focus();
        var sel     = document.selection.createRange();
        sel.text    = insertContent;
        sel.select();
    }
    //MOZILLA/NETSCAPE support
    else if (typeof myField.selectionStart === 'number' || typeof myField.selectionEnd == 'number') 
    {
        var startPos    = myField.selectionStart;
        var endPos      = myField.selectionEnd;
        console.log("startPos:" + startPos)
        // save scrollTop before insert
        var restoreTop    = myField.scrollTop;
        myField.value    = myField.value.substring(0, startPos) + insertContent + myField.value.substring(endPos, myField.value.length);
        if (restoreTop > 0)
        {
            // restore previous scrollTop
            myField.scrollTop = restoreTop;
        }
        myField.focus();
        myField.selectionStart  = startPos + insertContent.length;
        myField.selectionEnd    = startPos + insertContent.length;
    } else {
    	console.log('OK')
        myField.value += insertContent;
        myField.focus();
    }
}

 

最后我有一个例子,在附件中,下载下来,打开index.html或editor.html都能看到效果。

 

值得注意的是,上述代码只针对IE9以上版本以及chrome,firefox等支持HTML5的浏览器有效,IE8中做不到在光标位置插入图片。

如果要兼容IE8.0我找到了解决办法,就是不止是在父元素有这个属性就行,还需要在鼠标点击的那个元素加上这两个属性就OK。我把附件替换了,大家可以参考。

分享到:
评论

相关推荐

    vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: &lt;div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,&gt; {{item.labelName}} &lt;/div&gt; &lt;div ...

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

    关于在可编辑的div中插入内容到光标位置的知识点可以详细展开为以下几点: 1. 可编辑的div(contenteditable):HTML5新增了一个全局属性contenteditable,它可以使网页元素变得可编辑。通过将contenteditable设置...

    js之向div contenteditable光标位置添加字符.html

    主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    在网页开发中,常常需要获取用户在输入框、文本区域或可编辑的div元素中光标的位置,以便实现某些特定功能。由于不同浏览器(如IE、Firefox和Chrome)之间存在兼容性差异,因此统一实现这一功能具有一定的挑战性。...

    当div设置contentEditable=true时,重置其内容后无法光标定位

    这个好说… 但是清空完了内容,光标居然跑到了最前面,这就很头疼了。 在经过各种搜索之后,找到了解决办法,不多说,上代码! var _div = document.querySelector('.discuss_area'); var range = document....

    在可编辑div中插入文字或图片解决思路与实现步骤

    最近在网上碰到一个人问了我一个问题,在可...要使div可编辑 必须 加入 contentEditable="true" 这个属性。 然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。 由于火狐等标准浏览器支持getSelectio

    Vue中div contenteditable 的光标定位方法

    总结而言,通过使用上述方法,我们可以在Vue中有效地控制div[contenteditable=true]元素的光标位置,从而提升用户的编辑体验。这个方法特别适合于需要动态更新内容的富文本编辑器组件。希望上述内容对使用Vue开发...

    wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    它的一个独特功能是在编辑器失去焦点后,用户仍能在之前的位置插入图片,这在很多编辑器中并不常见。那么,它是如何实现这一功能的呢?本文将深入探讨其背后的实现机制。 首先,我们需要了解在JavaScript中处理文本...

    Dreamweaver-CS5自学教程-第八课:AP-DIV元素.pdf

    AP DIV是一个网页内容的容器,可以包含文本、图像、以及其他任何能在HTML文档中插入的元素,并且能够精确地定位在网页的任意位置。本教程将详细讲解如何在Dreamweaver CS5中创建、编辑和应用AP DIV元素。 1. 创建AP...

    Dreamweaver-CS5自学教程-第八课:AP-DIV元素.docx

    3. **内容输入**:光标定位在AP DIV层内,可以输入文本或插入图像等其他元素。 4. **定位**:AP DIV层可通过直接拖动或输入坐标值进行精确定位。 5. **代码查看**:AP DIV层的HTML代码由`&lt;div&gt;`标签及CSS样式组成,...

    通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第7章__表格与层

    2. 将光标定位在希望插入表格的位置。 3. 选择“插入”菜单,然后选择“表格”。 4. 在弹出的【表格】对话框中设置表格的行数、列数和宽度,点击“确定”即可插入表格。 #### 7.1.2 输入数据 插入表格后,直接在...

    javascript get cursor

    需要注意的是,这些操作仅适用于文本输入元素,对于非可编辑元素,如`&lt;div contenteditable="true"&gt;`,光标操作方式会有所不同。此外,考虑到兼容性问题,这些操作在不同的浏览器中可能存在差异,实际使用时需要做...

    Umeditor百度文本编辑器

    - `UM.insertHtml(html)`:在光标位置插入HTML代码。 - `UM.execCommand(commandName, param)`:执行特定的编辑命令,如`'insertimage'`用于插入图片。 - `UM.selection.getRange()`:获取当前选区范围对象。 - `UM....

    electron+vue实现div contenteditable截图功能

    4. 当用户点击表情按钮时,调用一个方法来在当前光标位置插入表情的表示形式,这可以通过JavaScript操作DOM来实现,如示例代码中使用`insertEmojAtCaret`函数所示。 5. 考虑到截图功能,可以利用Electron提供的API,...

    XHEditor 例子

    - `insertHtml(html)`:在光标位置插入HTML代码。 - `execCommand(commandName)`:执行指定的命令,如`bold`(加粗)、`italic`(斜体)等。 - `focus()`:使编辑器获取焦点。 - `blur()`:取消编辑器的焦点。 #...

    javascript 网页编辑框及拖拽图片的问题

    在本示例中,如果按下回车键(keyCode为13),则会在当前光标位置插入换行符,并将光标移动到下一行的起始位置。 然后,将这个函数绑定到iframe的onkeypress事件中,从而在用户输入时触发相应的逻辑。 2. 拖拽图片...

Global site tag (gtag.js) - Google Analytics