当使用文本编辑的时候，首先会使用 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. docker被屏蔽后下载方法

    docker镜像默认的官网上传平台:https://hub.docker.com/,k8s运行时需要从google下载镜像(k8s.gcr.io),但该网被屏蔽了,怎样下载到所需镜像呢? 1. 可在知 ...

  2. 开始学习Functional Programming

    打算先学F#, 再学Scala. 第一个F#程序 open System [<EntryPoint>] let main argv = let a = "Hello, World ...

  3. hdoj：2070

    Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. 框架源码系列二：手写Spring-IOC和Spring-DI（IOC分析、IOC设计实现、DI分析、DI实现）

    一.IOC分析 1. IOC是什么? IOC:Inversion of Control控制反转,也称依赖倒置(反转) 问题:如何理解控制反转? 反转:依赖对象的获得被反转了.由自己创建,反转为从IOC ...

  5. laravel框架生產vender文件夹

    方法一.修改拓展 去php.ini中查看下面三个扩展项是否开启 extension=php_fileinfo.dll extension=php_mbstring.dll extension=php_ ...

  6. 【OCP|OCM】Oracle培训考证系列

     [OCP|OCM]Oracle培训考证系列  我的个人信息 网名:小麦苗 QQ:646634621 QQ群:618766405 我的博客:http://blog.itpub.net/26736162 ...

  7. 从0移植uboot(六) _实现网络功能

    为uboot添加网卡功能可以让uboot通过tftp下载内核, 方便我们的开发, 对于网卡功能的移植,我们依然在在一遍又一遍的实践这个uboot改造的套路. 找运行逻辑,即插入代码的位置. 根据运行逻 ...

  8. 【Oracle】PL/SQL 显式游标、隐式游标、动态游标

    在PL/SQL块中执行SELECT.INSERT.DELETE和UPDATE语句时,Oracle会在内存中为其分配上下文区(Context Area),即缓冲区.游标是指向该区的一个指针,或是命名一个 ...

  9. Sublime Text 3 3143 注册码和遇到的PyV8无法下载问题

    packagecontrol官网:https://packagecontrol.io/installation sublime安装之后,安装Package Control管理插件. sublime3 ...

  10. mysql导出长数字到excel避免显示为科学记数法 解决方法

    经常遇到MYSQL导出长数字或纯数字字符串(如身份证.卡券号.条码.流水号等)到csv或excel文件,用excel打开会显示为科学记数法,甚至后几位转为0.这是由Excel的特性决定的:Excel显 ...