mu-selection-js
最新版本:0.1.1 ，更新于:2023-7-6
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;
|