[TOC]
一个简易的web文本编辑器,可以显示每行的行数,兼容ie9+,以及现代浏览器
-
支持行号显示
-
编辑器复制粘贴内容不会混乱
-
支持多个编辑器共存
引用 lineEditor.css、jquery.js、lineEditor.js 即可生成一个编辑器。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>编辑器</title>
<link rel="stylesheet" type="text/css" href="lineEditor.css">
<style type="text/css">
.title{
color: gray;
text-align: center;
}
.ed{
width: 40%;
float: left;
margin:0 4%;
}
</style>
</head>
<body>
<h1 class="title">lineEditor</h1>
<div id="easyCon" class="ed">
</div>
<div id="easyCon2" class="ed">
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="lineEditor.js"></script>
<script type="text/javascript">
var editor = lineEditor("#easyCon");
editor.init();
var editor2 = lineEditor("#easyCon2");
editor2.init();
</script>
</body>
</html>
-
getText
描述:获取编辑器的纯文本内容,行与行之间使用字符串'\n'分隔。
使用方法:
var editor=lineEditor("#easyCon"); editor.init(); //调用getText方法 var content=editor.getText();
-
getHtml
描述:获取编辑器的html文本,每行都使用
使用方法:
var editor=lineEditor("#easyCon"); editor.init(); //调用getHtml方法 var content=editor.getHtml();
tips:p标签的类名一定有lineContext,但是不是只有lineContext这个类名