当使用文本编辑的时候，首先会使用 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. FastDFS常用命令

    1.启动FastDFS tracker: /usr/local/bin/fdfs_trackered %FastDFS%/tracker.conf storage: /usr/local/bin/fd ...

  2. JavaWeb过滤器.监听器.拦截器-原理&区别(转)

    1.拦截器是基于java的反射机制的,而过滤器是基于函数回调 2.过滤器依赖与servlet容器,而拦截器不依赖与servlet容器 3.拦截器只能对action请求起作用,而过滤器则可以对几乎所有的 ...

  3. iframe子页面与父页面元素的访问以及js变量的访问[zhuan]

    https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html

  4. netMarketing类库: 类库说明

    这个类库是作者工作中使用的私人类库,本类库适用于自动化行业的软件工程师使用.如果大家在使用中有任何疑问和建议欢迎联系作者, 或者在页面留言. (一) 引用类库 本类库的环境为.net framewor ...

  5. oozie调度sqoop Job 数据库密码无法保存

    问题描述 通过oozie调度sqoop作业时,需要输入数据库作业密码,但在sqoop元数据服务配置密码后,过一段时间会失效. 解决方法 将数据库密码写入HDFS文件,通过配置Sqoop job,实现传 ...

  6. UE4/Unity3d 根据元数据自动生成与更新UI

    大家可能发现一些大佬讲UE4,首先都会讲类型系统,知道UE4会根据宏标记生成一些特定的内容,UE4几乎所有高级功能都离不开这些内容,一般来说,我们不会直接去使用它. 今天这个Demo内容希望能加深大家 ...

  7. 加速Windows 2003关机速度的设置方法

    indows 2003是目前版本最高的Windows操作系统,虽然其功能比历史上任何一个版都要强,但是其关机操作却给大家带来了一些小麻烦.其实我们完全可以解除这些麻烦,让关机加速   一.关闭关机事件 ...

  8. TCP是如何保证可靠传输的

    TCP 协议如何保证可靠传输   一.综述 1.确认和重传:接收方收到报文就会确认,发送方发送一段时间后没有收到确认就重传. 2.数据校验 3.数据合理分片和排序: UDP:IP数据报大于1500字节 ...

  9. 5迪米特法则LoD

    一.什么是迪米特法则 迪米特法则(Law of Demeter )又叫做最少知识 原则,也就是说,一个对象应当对其他对象尽可 能少的了解. 迪米特法则最初是用来作为面向对象的系统设 计风格的一种法则, ...

  10. Thread类的join()方法

    public class Demo { /** * Thread类的join()方法 * -------------------------------- * 1)join() * 2)join(lo ...