当使用文本编辑的时候，首先会使用 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. rm -rf python 实现 v0.1

    #coding=utf- import os def join(arr,join_falg): res = "" for a in arr: res += a+join_falg ...

  2. 【gulp】gulp + browsersync 构建前端项目自动化工作流

    什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构 ...

  3. JS截取字符串多余的为...

    如果截取字符串前几位,多余的用...表示该怎样做呢? JS代码 /** * js截取字符串,中英文都能用 * @param str:需要截取的字符串 * @param len: 需要截取的长度 */ ...

  4. IDEA自动生成序列化ID

    1.安装 serialVersionUID 插件: 2.设置你的IDEA为检查序列化ID 3.重启IDEA(有的版本可以不重启) 4.在需要自动生成序列化ID的类中使用快捷键:Alt+Insert 转 ...

  5. 从一次线上故障思考Java问题定位思路

    问题出现:现网CPU飙高,Full GC告警 CGI 服务发布到现网后,现网机器出现了Full GC告警,同时CPU飙高99%.在优先恢复现网服务正常后,开始着手定位Full GC的问题.在现场只能够 ...

  6. IDEA2018.2破解方法

    前言 之前也试过多种方式,但是总是使用了一会儿又需要破解,今天又找了一个,不知道可以使用多久. 目前看是可以破解开的,所以分享一下. 适用于JetBrain旗下版本为2.3或2.4的所有产品 一.在 ...

  7. Windows10 + IntelliJ IDEA 2017.3.2 + wamp2e + Yii + PHPunit 搭建测试环境

    一.环境 系统: windows10 WampServer:  wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-32b.exe IDE:  Intel ...

  8. Java不区分大小写的CaseInsensitiveMap

    Java中对于键值对,我们习惯使用类HashMap,使用方式:Map<String, String> result=new HashMap<String,String>(); ...

  9. sqlserver等软件下载

    http://msdn.itellyou.cn/ 找到所需要的,复制下载路径,到迅雷下载

  10. 获取当前目录绝对路径，参考canal run.sh里面的方式

    case "`uname`" in Darwin) bin_abs_path=`cd $(dirname $0); pwd` ;; Linux) bin_abs_path=$(re ...