最近写一个小富文本编辑器,知识点整理

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

 

posted @ 2019-06-17 10:17  墨墨君  阅读(340)  评论(0)    收藏  举报