mu-selection-js

最新版本:0.1 ,更新于:2022-2-1
mu-selection-js是一个HTML划线的JS库,你可以方便的在网页中划线。mu-selection-js不依赖于其他js库,可以直接使用。
这里准备了几个例子能让您快速了解可以实现的功能: 给第6~9个字划线清除所有划线

用法

下载

点击下载min

1,引用

javascript引用:
<script src="mu-selection-js"></script>
这里提供了一个工具栏的例子,可以修改为自己设计样式,注意:删除按钮需要增加class:mu-remove, 这样才能保证删除按钮正常的显示和隐藏。
html引用:
<div class="mu-tools-bar">
    <div class="mu-tools-bar-content">
    <button class="mu-remove" onclick="MuSelectionJs.removeLine()">删除</button>
    <button onclick="MuSelectionJs.addLineBySelection(1)">直线</button>
    </div>
</div>
        
style增加:

<style>
    .mu_line_1{
        text-decoration: underline;
        text-decoration-color: #336699;
    }
</style>
        

2,使用

默认全屏可划线
muSelectionJs.init()
当然你也可以设置划线区域如
muSelectionJs.init({"contentTag":"body"})

3,参数设置

配置文件:
参数名称 说明 默认值
contentTag 可以划线的结点,支持通过id,class,标签名获取结点 。如 #content .conteng body body
toolsBarTag 工具栏结点,如果不填写也可以通过方法触发设置划线 null
clearSpace 清理contentTag中的空格,如果设置false, 两个标签间隔的字符也会计算字数。如<span>a</span> <span>b</span>会算作3个字。
如果你需要保留HTML结点的原始状态,也可以设置成false。
true
lineClassPrefix 线css名称前缀。
如:.highlight_line_1{
        text-decoration: underline;
        text-decoration-color: blue;
    }
                    
highlight_line_
lineDelegate 回调方法。 当有增加,删除,编辑时,可以通过lineDelegate接收参数做其他处理
               function(typeName,lineData){}
                    //说明:typeName为字符串格式:add|remove|update
                    //lineData为json格式:{begin:1,end:2:range:1,type:1,line_id:1}
                    

4,方法

方法名称 说明 举例
setDataList(dataList) 像mu-selection-js中批量添加json格式的划线数据。
MuSelectionJs.readDataList([
{begin:1,end:2,range:1,type:1,line_id:1},
{begin:3,end:4,range:1,type:1,line_id:2}
])
                    
getDataList() 从mu-selection-js中读取json格式的划线数据。可以用于序列化存储。
MuSelectionJs.readDataList()
返回:[
{begin:1,end:2,range:1,type:1,line_id:1},
{begin:3,end:4,range:1,type:1,line_id:2}
]
                    
removeLineAll() 从mu-selection-js中删除所有划线
MuSelectionJs.removeLineAll()
                    

美化

1,划线样式建议

这里准备了一些常用的样式,你可以用在自己的程序里
效果 样式脚本
常规下划线
text-decoration: underline;
text-decoration-color: #336699;
                    
波浪下划线
text-decoration: underline;
text-decoration-color: #336699;
text-decoration-style: wavy;
                    
马克笔
background:#DBF0FF;
                    
设置划线间距
支持换行
border-bottom:solid 1px;
border-color: #336699;
padding-bottom: 4px;
                    
图片划线
background-image:url('star.png');
background-position:bottom;
background-repeat: repeat-x;
background-size: 10%;
padding-bottom: 4px;