<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>带序号编辑器</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/simditor.css" type="text/css">
<link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<style>
</style>
<body>
<textarea id="editor" autofocus></textarea>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/module.js" type="text/javascript"></script>
<script src="js/hotkeys.js" type="text/javascript"></script>
<script src="js/simditor.js" type="text/javascript"></script>
<script>
$(function () {
// 初始化富文本编辑器
editor = new Simditor({
textarea: $('#editor'),
toolbar: false,
toolbarHidden: true,
// allowedTags:['br', 'span' ,'ol', 'li','div'],
allowedAttributes: {
span: ['class', 'style', 'data-json', 'id']
}
});
$('.simditor-toolbar').hide()
editor.on('valuechanged', function (e, src) {
setRowNumber();
})
//设置行号
setRowNumber();
});
function setRowNumber() {
$('#rownum_div').empty()
let $elements = $('.simditor-body').children();
let rownum = 1;
for (let i = 0; i < $elements.length; i++) {
let $element = $($elements[i]);
if ($element.height() == 0) {
continue
}
let ele_height = $elements[i].getBoundingClientRect().height;
let span = '<span style="display: block;width: 100%;height:' + ele_height + 'px ">' + rownum + '</span>';
$('#rownum_div').append(span)
rownum++;
}
var height = $(".simditor")[0].scrollHeight;
$("#rownum_div").height(height)
}
</script>
</body>
</html>
评论0