【求助】鼠标在DIV里的内容托选中后,再次点击按钮后需要对选中的文字变色 并且需要在选中文字的后面插入html

立信徐哥 2018-07-25 01:44:20



需要鼠标在DIV里的内容托选中后,
再次点击按钮对选中的文字变色 并且需要在选中文字的后面插入一段内容的html


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>document.selection 的 createRange</title>
</head>
<body>

<div style="width: 1000px;font-size: 20px;" contenteditable="true">   大雾弥漫,半空中垂挂着一道又一道手臂粗的藤蔓,影影绰绰,被雾霭所阻,看不真切。 网<br><br>    <br><br>        一颗非常沉重的卫星,被许多藤蔓缠绕着,坠落在列车上,此地无声无息,死一般的寂静。<br><br>    <br><br>        这个场面实在有些冲击人的眼球,那可是一颗卫星啊,用在太空中,在既定的轨道上运行,它怎么坠落下来了?!<br><br>    <br><br>        楚风与周全的脊背都有些凉意,感觉阵阵寒冷,不自禁的再次仰望灰暗的高空,那里有什么?<br><br>    <br><br>        “不要告诉我,这些藤蔓真的是从天穹上垂落下来的!”周全的声音有些沙哑,面色非常不好看。<br><br>    </div>
<div>
<input type="button" value="使用版本" onclick="javascript:xjtest();" />
<input type="button" value="去除" /></div>
<div id="shuRu" style="display: none;width: 100%;height: 100%;background-color:rgba(0,0,0,0.2);position:absolute;left:0; top:0;z-index: 99; text-align: center;">
<textarea name="" id="neiRong" rows="" cols="" style="margin-top: 300px;width: 200px;height: 100px;">这里的内容应该。</textarea>
<input type="button" id="btn" value="注释" onclick="javascript:ff_Bold();" />
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function ff_Bold() {
//选中文字
var selObj = window.getSelection();
var range = selObj.getRangeAt(0);
var temp_text = range.toString(); //保存选中的文字

//插入
document.execCommand('insertHTML', false, '<span style="color:#fff;background-color:#ff5656">' + temp_text + '</span><span style="color:#fff;background-color:#489c48;">【老师评语】:' + $('#neiRong').val() + '</span>');
$('#shuRu').hide();
}

//使用版本
function xjtest() {
//弹出输入框
$('#shuRu').show();
}
</script>
</body>
</html>



现在问题:是 DIV 设置 contenteditable="true" 这样就有个缺陷就是 可以删除添加内容了,
如果不开启contenteditable="true" 我写的代码就不能实现 文字变色和添加HTML
还有一个问题就是 在出现提示框后如果鼠标点击其他地方,之前选中的文字就不被选中了。

可以加Q:260576780
...全文
253 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
立信徐哥 2018-07-25
  • 打赏
  • 举报
回复
引用 1 楼 lqlqlq007 的回复:
感觉你的设计有问题,这样不是可以对评语再加评语了?

是对内容进行评语
讨厌走开啦 2018-07-25
  • 打赏
  • 举报
回复
感觉你的设计有问题,这样不是可以对评语再加评语了?

87,954

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧