div模拟input/textarea实现输入文字图片

div模拟input/textarea实现输入文字图片

1.css

.div-edit {
	font-size: 15px;
	width: 100%;
	height: 40px;
	line-height: 20px;
	padding: 10px 15px;
	border: 1px solid #9f9f9f;
	border-radius: 8px;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	outline: 0;
	-webkit-appearance: none;
	overflow: auto;
}

.div-edit img {
	height: 24px;
	width: auto;
}

/* 清除左右滚动条 */
.div-edit::-webkit-scrollbar {
	display: none;
}

.div-edit:empty:before {
	content: attr(placeholder);
	color: #999;
}

.div-edit:focus:before {
	content: none;
}

2.html

<div id="saytext" class="div-edit" contenteditable="plaintext-only" placeholder="请输入信息..."></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102205696&di=9cb52f7f2c062423319fdb31cc669b86&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F27%2F20160227213604_BVZYf.jpeg" height="80" onclick="changeSaytext(this)" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568102357940&di=aaef4c5eee235a59341d29d94581ae4b&imgtype=0&src=http%3A%2F%2Fimage.retui8.com%2F%3Furl%3Dhttp%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FvwWXNGTJrV2wEtK2Z4iaEzgJP95RdTy73iazdqWib8sDWSlWlhWY7nGuuFeYwXfVQtq23DtkLJUYEDxs9YNy2icQoA%2F640%3F.jpg" height="80" onclick="changeSaytext(this)" />
		

3.js

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
	var range;
	var editor = document.querySelector('#saytext');
	var selection = window.getSelection();

	function initSaytext() {
		editor.onclick = function() {
			if (selection.rangeCount && selection.getRangeAt) {
				range = selection.getRangeAt(0);
				range.deleteContents()
			}
		}
		editor.onkeyup = function() {
			if (selection.rangeCount && selection.getRangeAt) {
				// 设置最后光标对象
				range = selection.getRangeAt(0);
				range.deleteContents()
			}
		}
	}
	initSaytext();
	//div中插入img
	function changeSaytext(e) {
		//内容
		var emojiText = e.cloneNode(true);
		$(emojiText).attr("onclick", ""); //清除点击事件
		editor.focus();
		range = selection.getRangeAt(0);
		range.insertNode(emojiText);
		range = range.cloneRange();
		range.setStartAfter(emojiText);
		// 使光标开始和光标结束重叠
		range.collapse(true);
		// 清除选定对象的所有光标对象
		selection.removeAllRanges();
		// 插入新的光标对象
		selection.addRange(range);
	}
</script>

效果：