最近写一个小富文本编辑器,知识点整理
1:最近维护项目,老板让新增了一个,公告功能,前提是输出的公告要保持原来的布局风格,也就是最简便的编辑器了,基本都是文本,只要保证最起码得文本间的空格和换行就行了,于是搜索文档,记录如下
document.all//用来判断是否IE浏览器
因为此方法最初为IE提供,只有在IE浏览器中,document.all才返回 布尔值true, 其他浏览器返回false,所以可以用来判断
var range = document.createRange()//创建一个range对象.表示页面上一段连续的区域,通过此对象可以操作或修改页面上的任何内容
range对象的属性和方法
//range对象的属性和方法
range.setStart(dom,'开始的索引')//设置选择的起点
range.setEnd(dom,'结束的索引')//设置选择的重点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range3</title>
<script>
function deleteChar() {
var div = document.getElementById("myDiv");
var textNode = div.firstChild;
var rangeObj = document.createRange();
rangeObj.setStart(textNode,1);
rangeObj.setEnd(textNode,4);
rangeObj.deleteContents();
}
</script>
</head>
<body>
<div id="myDiv" style="color:red">这段文字是用来删除的</div>
<button onclick="deleteChar()">删除文字</button>
</body>
</html>
//setStartBefore：将“起点”设置到referenceNode前
//setStartAfter：将“起点”设置到referenceNode后
//setEndBefore：将“结束点”设置到referenceNode前
//setEndAfter：将“结束点”设置到referenceNode后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="application/javascript">
function delrow(){
var table=document.getElementById("mytable");
if(table.rows.length>0){
var row=table.rows[0];
var rangeObj=document.createRange();
rangeObj.setStartBefore(row);
rangeObj.setEndAfter(row);
rangeObj.deleteContents();
}
}
</script>
</head>
<body>
<table id="mytable" border="1">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
<button onclick="delrow()">删除第一行</button>
</body>
</html>
range.selectNode(dom)//选择该节点的所有子孙节点
range.selectNodeContents(dom)//选择该节点的所有子节点
cloneRange()//返回range对象
cloneContents()//返回html片段
将任意html元素变为可编辑元素
contentEditable = true
为元素添加此属性后,该元素变为可编辑
并可调用
documnet.execCommand('命令',true或false,'值')//true弹出对话框
参考https://www.cnblogs.com/leong-min/p/6483523.html
