当使用文本编辑的时候，首先会使用 textarea ,但是，这个里面不能加入其它标签，也就是不能富文本化。 于是可以使用 contenteditable

就是给 div 加上该属性。就变得丰富起来。使用的时候，发现有两个问题。

1、placeholder 无法正常使用，解决办法，是加上一段css：

.con:empty:before{

		    content: attr(placeholder);

		    color:#bbb;

		}

		.con:focus:before{

		    content:none;

		}

2、复制，或者用 qq 微信 截图只会，在编辑器内，按 ctr+v 不能将图片复制到编辑器内，解决办法是 监听 事件  paste， 这个事件，目前来说兼容不是很好，但是 谷歌 火狐 等都能正常使用

下面给出完整代码：

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<meta http-equiv="X-UA-Compatible" content="ie=edge" />

	<title>Document</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		div{

			width: 800px;

			height: 600px;

			border: 1px solid #ccc;

			margin:  20px auto;

		}

		div img{

			max-width: 80%;

		}

		.con:empty:before{

		    content: attr(placeholder);

		    color:#bbb;

		}

		.con:focus:before{

		    content:none;

		}

	</style>

</head>

<body>

	<div class="con" contenteditable="true" placeholder="请输入描述内容..."  id="edit"></div>

</body>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

//document.execCommand('InsertImage', false, filePath);

$("#edit").on("paste",function(e){

	var  d = e.originalEvent;

	if(d&&d.clipboardData) {

		var clipboardData = d.clipboardData;

		//兼容写法，优先取 files

		if(clipboardData.files && clipboardData.files.length > 0){

			console.log("-------files----");

			mapFile(clipboardData.files);

			return ;

		}

		if (clipboardData.items && clipboardData.items.length > 0) {

			console.log("------items-----------")

			mapFile(clipboardData.items);

            return ;

        }

	}

});

function mapFile(files){

	for(var i = 0; i < files.length; i++){

		var c = files[i];

		if(c.type && c.type.split("/")[0] == "image"){

			getBase64(files[i]).then(function(ret){

				document.execCommand("insertImage",false,ret);

			}).catch(function(ret){});

		}

	}

}

function getBase64(img) {

	return new Promise(function(resolve,reject){

		  const reader = new FileReader();

		  reader.addEventListener('load', () =>{resolve(reader.result)});

		  reader.readAsDataURL(img);

	})

}

</script>

</html>

　　

　效果图

　3、当 contenteditable 作为聊天输入框的时候，就需要按住 enter + ctrl 换行， 按 enter 发送消息

　　

$("#textarea").keydown(function($event){

        	 var keycode = window.event ? $event.keyCode : $event.which;

        	   var evt = $event || window.event;

            if (keycode == 13 && !(evt.ctrlKey)) {

                $event.preventDefault();

                return false;

            }

            // ctrl+回车-->换行

            if (evt.ctrlKey && evt.keyCode == 13) {

               if (window.getSelection) {

				      var selection = window.getSelection(),

				      range = selection.getRangeAt(0),

				      br = document.createElement("br"),

				      textNode = document.createTextNode("\u00a0"); //Passing " " directly will not end up being shown correctly

				      range.deleteContents();//required or not?

				      range.insertNode(br);

				      range.collapse(false);

				      range.insertNode(textNode);

				      range.selectNodeContents(textNode);

				      selection.removeAllRanges();

				      selection.addRange(range);

				      document.execCommand("delete");

				      return false;

				  }

                return false;

            }

        });

　　

关于 div 的 contenteditable 使用，placeholder 和 复制图片显示并上传，按住 enter+ctrl 内容换行的更多相关文章

  1. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  2. div的contenteditable和placeholder蹦出的火花

    今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder. 在文本框中换行自然想到了textarea. 问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了. 这个时候 ...

  3. img超出div width时， jQuery动态改变图片显示大小

    参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...

  4. DIV实现CSS 的placeholder效果

    placeholder是HTML5中input的属性,但该属性并不支持除input以外的元素   但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> ...

  5. div设置contenteditable="true" 光标消失：原因

    原因1:document.onselectstart= function(){return false;}; 原因2:父层设置了user-select:none 导致 子层设置了 contentedi ...

  6. 可编辑DIV （contenteditable="true"） 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  7. div设置contenteditable 的小技巧

    div设置contenteditable="true",即可编辑,除从网页粘贴过来内容的格式 <div contenteditable="true" id ...

  8. 让富文本编辑器支持复制doc中多张图片直接粘贴上传

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...

  9. # quill-image-extend-module ：实现vue-quill-editor图片上传，复制粘贴，拖拽

    改造vue-quill-editor: 结合element-ui上传图片到服务器 quill-image-extend-module vue-quill-editor的增强模块, 功能: 提供图片上传 ...

随机推荐

  1. python：print输出内容大拼接,重新认识 + 和 ，

    加号 + 和 逗号, 都可以用来拼接print的输出内容,但是两者也是有区别的. 加号拼接: print ('zwf'+'wk') 1 1 结果: zwfwk 1 1 逗号拼接: print ('zw ...

  2. 【MySQL （六） | 详细分析MySQL事务日志redo log】

    Reference:  https://www.cnblogs.com/f-ck-need-u/archive/2018/05/08/9010872.html 引言 为了最大程度避免数据写入时 IO ...

  3. Hibernate获取数据java.lang.StackOverflowError

    原因:因为在重写toString()方法时,把关联的属性也放入到toString方法中了,去掉就可以了. 如:重写的toString方法中不能有关联关系IDCard属性idCard public cl ...

  4. comake2

    http://blog.csdn.net/lsjseu/article/details/23395565 comake允许用户通过编写COMAKE文件,来帮助用户管理编译依赖以及编译环境的开发工具: ...

  5. Linux的rp_filter与策略路由

    Linux的rp_filter用于实现反向过滤技术,也即uRPF,它验证反向数据包的流向,以避免伪装IP攻击,但是它和Linux的策略路由却很容易发生冲突,其本质原因在于,uRPF技术强制规定了一个反 ...

  6. MySQL-监控告警系统

    开源地址: https://github.com/ycg/mysql_web QQ: 779647966 Email: ycg166911@163.com 利用python的flask进行后台开发,前 ...

  7. Scikit-learn使用总结

    在机器学习和数据挖掘的应用中,scikit-learn是一个功能强大的python包.在数据量不是过大的情况下,可以解决大部分问题.学习使用scikit-learn的过程中,我自己也在补充着机器学习和 ...

  8. 在iPhone手机上写了input type="date" 显示不出来的原因

    在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...

  9. 简单工厂模式（Java与Kotlin版）

    Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...

  10. [Golang] lua战斗验证服务器

    我的另外一个开源项目,任何建议.指正错误和优化我都非常欢迎 baibaibai_000@163.com 简介 本项目是用go语言编写,结合cgo功能,支持高并发执行lua脚本的程序. 扩展 可以扩展成 ...