当使用文本编辑的时候，首先会使用 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. [转]用JAVA在读取EXCEL文件时如何判断列隐藏

    原文地址:https://www.cnblogs.com/OwenWu/archive/2012/01/03/2310620.html org.apache.poi.hssf.usermodel.HS ...

  2. bash计算上下行数据差值

    for i in {1..60000}; do echo "`date +'%F %T'` `df /dev/md0 | grep 'data1'` "; sleep 1; don ...

  3. 微信OAuth2.0网页授权设置一个域名需多个域名使用的问题

    最近遇到一个问题,一个微信公众号,需要在多个域名上使用OAuth2.0网页授权,但微信OAuth2.0网页授权回调域名只能设置一个. 解决办法: 通过多一次的跳转,解决了微信限制回调域名只能设置一个的 ...

  4. 用WordPress建立专业网站教程 (一步步建站, 一步也不少)

    最新美国域名中心US Domain Center: http://www.usdomaincenter.com/ 建站教程 (10分钟上线, 无需备案): https://www.qiyewp.com ...

  5. 使用git创建与合并分支

    一.概述 学会使用git命令对项目进行创建分支,并在创建结束后合并到主分支上. 问:为什么要创建分支? 答:在原来的分支上创建一个自己的分支进行开发,在开发完毕后一次性合并到原先的分支,这样既保证安全 ...

  6. Docker（一）Linux开启你的Docker之旅

    前言 Docker容器最早受到RHEL完善的支持是从最近的CentOS 7.0开始的,官方说明是只能运行于64位架构平台, 内核版本为2.6.32-431及以上(即 >= CentOS 6.5, ...

  7. springboot2.x版本整合redis(单机/集群)(使用lettuce)

    在springboot1.x系列中,其中使用的是jedis,但是到了springboot2.x其中使用的是Lettuce. 此处springboot2.x,所以使用的是Lettuce.关于jedis跟 ...

  8. ios12 siri 语音识别

    原理:先用系统的录音器录音,让后让siri识别语音转文字 第一步 :在项目plist文件添加授权如图 第二步:导入头文件,添加协议#import <Speech/Speech.h>#imp ...

  9. asp.net mvc 路由检测工具

    初学mvc,路由搞不清楚,可以通过一款插件 查看匹配的路由. 工具名<RouteDebugger> 可以在nuget中查询RouteDebugger后,安装.或者在控制台进行安装: pm& ...

  10. Spark JDBC To MySQL

    mysql jdbc driver下载地址https://dev.mysql.com/downloads/connector/j/ 在spark中使用jdbc1.在 spark-env.sh 文件中加 ...