用jq实现编辑文本

最新推荐文章于 2022-12-20 17:23:14 发布

拜了个呗

最新推荐文章于 2022-12-20 17:23:14 发布

阅读量613

点赞数 3

分类专栏： jq

本文链接：https://blog.csdn.net/qq_39213763/article/details/108225349

版权

jq 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

编辑文本：(1) 用jq实现（2）自定义字号（3）给选中的文字添加标签（4）提交后能获取到文本中添加的所有标签以及内容

在这里插入图片描述

上代码
代码中还是有一点问题没有解决的，如果您有更好的方法，记得留言哦~~~~

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/index.js?id=5"></script>

</head>
<body>
	<div id="box">
		<div class="headBox">
			<ul class="oUl">
				<li class="oli">日期</li>
				<li class="oli">地点</li>
				<li class="oli">时间</li>
				<li class="oli">人名</li>
				<li class="oli">国家</li>
				<li class="oli">职务</li>
				<li class="oli">金额</li>
				<li class="oli">机构</li>
			</ul>
		</div>
		<div class="centerBox">
			<!-- 控制栏 -->
			<div class="controlBox">
				<div class="toolBox">
					<span xlass="lab">字体：</span>
					<select id="selectFontSize" name="size">
						<option value="14">14</option>
						<option value="16">16</option>
						<option value="18">18</option>
						<option value="20">20</option>
						<option value="22">22</option>
						<option value="24">24</option>
					</select>
				</div>
			</div>
			<!-- 文字区 -->
			<div class="txtAreaBox">
				<p class="txt">许多参与者说，年齿日增让他们感到震惊。由于缺乏物资与食物，以及亟需的重装备和通信设备(特别是在手机都收不到信号的时候)，影响还在持续。刘易斯 是- -位才华横溢的演员，他成功地表现了布罗迪不断变化的多重身份间的细微地点微差别。美国 民众对种族关系态度悲观要做好被刺探的准备。FBI 对克林顿高级幕僚胡玛阿丁( HumaAbedin )使用的一台电脑上的邮件展开的调查，对总统选举活动造成极大冲击，给唐纳德特朗普(DonaldTrump)带来了一个 新机会。据该组织称，第四只黑猩猩属尼亚加拉瀑布市(美)的卡门普莱斯蒂(CarmenPresti)所有， 她运作一家非营利的灵长类动物庇护所,那里有一些猴 子和一-只黑猩猩。我多么希望他们能做道德考量，看-看自己的灵魂。詠民失去了获得国民大会一个席位的机会。在英国，鉴于英国经济的复苏依然很缓慢，英格兰银行(BankofEngland)让基准利率保持在0.5%的历史低位。有不少乘客在车里呕吐，以以于公司特地制定了这方面的规定(赔偿在50到200美元之间)。而现在，一个新的自我驾到了。</p>
			</div>
		</div>
		<!--底部按钮区-->
		<div class="footBox">
			<div class="btnBox">
				<button class="saveBtn btn">保存</button>
				<button class="submitBtn btn">提交</button>				
			</div>
		</div>
	</div>
</body>
</html>

$(function()
{
	var isChange;
	var arrTxt=[];
	var labX,labY;
	var startX,endX,allTxt,preTxt,middleTxt,lastTxt;
	var bgColor="",lab="";//当前的色值
	//改变文本框中字体的大小
	var initFontSize = $("#selectFontSize").val();
	$(".txtAreaBox p.txt").css({"font-size":initFontSize+"px"})
	//监听select框的选择事件
	$("#selectFontSize").change(function(){
		var selected=$("#selectFontSize").val()
	  	$(".txtAreaBox  p.txt").css({"font-size":selected+"px"})
		$(".txtAreaBox p.txt span").each(function(_id)
		{
			labX = $(this).position().left;
			var tarLab = $("div.lab").eq(_id);
			console.log(tarLab)
			tarLab.css({"left":$(this).position().left,"top":$(this).position().top-18})
		})
	});
	//===========================================================
	//给页面中的li标签添加点击事件
	
	$(".oli").each(function(_id)
	{
		$(this).on("click",function(e)
		{
			if(!isChange){return;}
			bgColor = _id==0?"#19BDAD": _id==1?"#D97FA4": _id==2?"#DD4766": _id==3?"#37BBD6":_id==4?"#F7D664": _id==5?"#EAAE64": _id==6?"#8056C0":_id==7?"#118C7B":null;
			lab = $(this).text();
			$(this).siblings("li").css({"background":""}); 
			$(this).css({"background":bgColor}); 
			
			//改变文字颜色
			var contentTxt="";
			for(var i=0;i<arrTxt.length;i++)
			{
				if(arrTxt[i].middleTxt)
				{
					contentTxt += arrTxt[i].preTxt + '<span class="sp" data-pyl="'+startX+'" data-lab="'+lab+'" style="color:'+bgColor+';">' + arrTxt[i].middleTxt + "</span>" + arrTxt[i].lastTxt;
				}
				else
				{
					console.log("span")
					contentTxt += arrTxt[i].outerHTML||arrTxt[i].textContent
				}
			}
			console.log(contentTxt)
			$(".txtAreaBox p.txt").html(contentTxt)
			//添加标签
			labX = $(".sp").position().left;
			labY = $(".sp").position().top-18;
			$(".txtAreaBox").append('<div class="lab" style="color:'+bgColor+';width: 40px;height: 17px;line-height:15px;position: absolute;font-size:14px;left:'+labX+'px;top:'+labY+'px;text-align: center;border:1px solid '+bgColor+';border-radius: 10px;">' + lab + '</div>')
			isChange=false
		})
	})
	//鼠标选中文字段落中的文字

	$(".txtAreaBox p.txt").on("mousedown",function(e)
	{
		arrTxt=[];
		$("li.oli").css({"background":""});
		console.log(e.pageX,e.pageY)
		//获取页面上的span标签
		$(".txtAreaBox p.txt span").removeClass("sp");
	})
	$(".txtAreaBox p.txt").on("mouseup",function(e)
	{
		var select_text = getSelection();
		//获取选中文字的索引值
		var range = select_text.getRangeAt(0);
		console.log("===range===================================")
		console.log(range)
		startX = range.startOffset;//起点
		endX = range.endOffset;//终点
		if(select_text!="")
		{
			isChange=true
			//获取文本段落中的节点
			var childNodes = $(e.currentTarget)[0].childNodes;
			//如果节点个数只有一个，说明文本段为干净的段落
			if (childNodes.length == 1)
			{
				//获取全部的文本
				allTxt = childNodes[0].textContent;
				//
				preTxt = allTxt.substring(0, startX);
				lastTxt = allTxt.substring(endX,allTxt.length);
				middleTxt = allTxt.substring(startX,endX)
				arrTxt[0]={"preTxt":preTxt,"lastTxt":lastTxt,"middleTxt":middleTxt}
			}
			else if(childNodes.length > 1)
			{
				console.log("有多个span")
				//多个span合并
				console.log("childNodes.length=========="+childNodes.length)
				for(var i=0;i<childNodes.length;i++)
				{
					console.log("i========"+i)
					console.log(childNodes[i])
					arrTxt.push(childNodes[i])
					if(childNodes[i]==range.startContainer)
					{
						nodeText = childNodes[i].textContent;
						preTxt = nodeText.substring(0, startX);
						lastTxt = nodeText.substring(endX, nodeText.length);	
						middleTxt = nodeText.substring(startX,endX)
						arrTxt[i]={"preTxt":preTxt,"lastTxt":lastTxt,"middleTxt":middleTxt}
					}
					else
					{
						arrTxt[i]=childNodes[i]
					}
					
				}	
				
				console.log(arrTxt)
			}
		}
	})
	
	//点击提交按钮，做记录
	$(".submitBtn").click(function()
	{
		var txt = "";
		$(".txtAreaBox p.txt span").each(function(id)
		{
			txt+='词汇:'+$(this).text()+'||'+'偏移量:'+$(this).data("pyl")+'||'+'标签:'+$(this).data("lab")+'\n'    
		})
		alert(txt)
	})
})

*{
	margin: 0;
	padding:0;
	box-sizing: border-box;
}
li{ 
	float:left; 
	list-style:none;
}
#box{
	width: 900px;
	height: 60%;
	margin:0 auto;
}
/*headBox*/
.headBox{
	margin-top:20px;
}
ul{
	width: 100%;
	height: 30px;
	
	overflow: hidden;
}
.oli{
	width: 80px;
	height: 30px;
	border:2px solid #19BDAD;
	border-radius: 15px;
	margin-right: 10px;
	text-align: center;
	line-height: 26px;
	cursor: hand;
}
.oli:nth-child(2){
	border-color: #D97FA4;
}
.oli:nth-child(3){
	border-color: #DD4766;
}
.oli:nth-child(4){
	border-color: #37BBD6;
}
.oli:nth-child(5){
	border-color: #F7D664;
}
.oli:nth-child(6){
	border-color: #EAAE64;
}
.oli:nth-child(7){
	border-color: #8056C0;
}
.oli:nth-child(8){
	border-color: #118C7B;
}
/*centerBox*/
.centerBox{
	width: 100%;
	border:2px solid #F1F1F2;
	margin-top:10px;
}
.controlBox{
	border-bottom: 2px solid #F1F1F2;
	padding:10px;
}
.txtAreaBox{
	padding:15px;
	line-height: 40px;
	color:#333;
	font-weight: 400;
	position: relative;
}
/*footBox*/
.footBox{
	margin-top:20px;
}
.btnBox{
	float: right;
}
.btn{
	width: 100px;
	height: 38px;
	text-align: center;
	line-height: 38px;
}
.btn:nth-child(1)
{
	margin-right: 10px;
}

拜了个呗

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jq实现编辑文本

编辑文本：(1) 用jq实现（2）自定义字号（3）给选中的文字添加标签（4）提交后能获取到文本中添加的所有标签以及内容上代码代码中还是有一点问题没有解决的，如果您有更好的方法，记得留言哦~~~~<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial
复制链接

扫一扫