投稿
  1. 极客之音首页
  2. 后端开发

前端实现带行号的文本编辑器

小半 • • 后端开发 • 阅读 600

导读：本篇文章讲解 前端实现带行号的文本编辑器，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

有时候要实现带有滚动条或者带有行号的文本输入区域，采用css可以很简单的实现。

实现方式一：

使用 CodeMirror 来实现 ：CodeMirror官网

官网实例地址：CodeMirror示例

可以选择不同的示例场景，比如代码折叠、双向文本、自定义滚动条等等

如果你想使用不同的主题请修改下面代码的第10行和第40行，加载你想使用的主题 js 和修改主题名称。

可参考的主题：codemirror主题效果概览

代码

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
	<!--codemirror必须引入的-->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.js"></script>
	
	<!--引入css文件，用以支持主题-->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/theme/mdn-like.css" rel="stylesheet" />
	<!--对光标所在行和选中区域高亮-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/selection/active-line.js"></script>
	<!--javascript代码高亮-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/javascript/javascript.min.js"></script>
	<!--xml代码高亮-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/xml/xml.min.js"></script>
	<!--java代码高亮-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/clike/clike.min.js"></script>
	
	<!--支持代码折叠-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldcode.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/brace-fold.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/comment-fold.js"></script>
</head>

  <body >
	<div >
		<textarea class="form-control" id="code" name="code"></textarea>
	</div>
	
	<script type="text/javascript" >
		//根据DOM元素的id构造出一个编辑器
		var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
				mode: "application/xml",    //实现xml代码高亮
				mode: "text/x-javascript", //实现javascript代码高亮
				mode: "text/x-java", //实现Java代码高亮
				lineNumbers: true,  //显示行号
				theme: "mdn-like",   //设置主题
				lineWrapping: false, //false则超过宽带会显示水平滚动条，true不会显示
				foldGutter: true,   //代码是否可折叠
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
				matchBrackets: true,    //括号匹配
				indentWithTabs: true,  //前 N*tabSize 个空格是否应替换为 N 个制表符
				smartIndent: true,   //上下文相关缩进（即是否缩进与之前的行相同）
				autofocus: true,
				styleActiveLine: true, //光标所在行高亮
				//readOnly: true,      //只读
		});
		

		editor.setSize('800px', '700px');     //设置代码框的长宽
		//editor.setValue("测试测试");    //给代码框赋初始值
		//editor.getValue();    //获取代码框的值
	</script>
  </body>
</html>

效果

在这里插入图片描述
百度云离线代码：
https://pan.baidu.com/s/14-ZmBNqYackBb8CYq31a5w
提取码：bvqf

实现方式二

这种方式通过jQuery实现

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>JQuery Lined TextArea Example</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

	<script >
	(function($) {
	$.fn.linedtextarea = function(options) {
		// Get the Options
		var opts = $.extend({}, $.fn.linedtextarea.defaults, options);
	
		/*
		 * Helper function to make sure the line numbers are always
		 * kept up to the current system
		 */
		var fillOutLines = function(codeLines, h, lineNo){
			while ( (codeLines.height() - h ) <= 0 ){
				if ( lineNo == opts.selectedLine )
					codeLines.append("<div class='lineno lineselect'>" + lineNo + "</div>");
				else
					codeLines.append("<div class='lineno'>" + lineNo + "</div>");
				
				lineNo++;
			}
			return lineNo;
		};
		
		
		/*
		 * Iterate through each of the elements are to be applied to
		 */
		return this.each(function() {
			var lineNo = 1;
			var textarea = $(this);
			
			/* Turn off the wrapping of as we don't want to screw up the line numbers */
			textarea.attr("wrap", "off");
			textarea.css({resize:'none'});
			var originalTextAreaWidth	= textarea.outerWidth();

			/* Wrap the text area in the elements we need */
			textarea.wrap("<div class='linedtextarea'></div>");
			var linedTextAreaDiv	= textarea.parent().wrap("<div class='linedwrap' style='width:" + originalTextAreaWidth + "px'></div>");
			var linedWrapDiv 			= linedTextAreaDiv.parent();
			
			linedWrapDiv.prepend("<div class='lines' style='width:50px'></div>");
			
			var linesDiv	= linedWrapDiv.find(".lines");
			linesDiv.height( textarea.height() + 6 );
			
			
			/* Draw the number bar; filling it out where necessary */
			linesDiv.append( "<div class='codelines'></div>" );
			var codeLinesDiv	= linesDiv.find(".codelines");
			lineNo = fillOutLines( codeLinesDiv, linesDiv.height(), 1 );

			/* Move the textarea to the selected line */ 
			if ( opts.selectedLine != -1 && !isNaN(opts.selectedLine) ){
				var fontSize = parseInt( textarea.height() / (lineNo-2) );
				var position = parseInt( fontSize * opts.selectedLine ) - (textarea.height()/2);
				textarea[0].scrollTop = position;
			}

			
			/* Set the width */
			var sidebarWidth		= linesDiv.outerWidth();
			var paddingHorizontal 		= parseInt( linedWrapDiv.css("border-left-width") ) + parseInt( linedWrapDiv.css("border-right-width") ) + parseInt( linedWrapDiv.css("padding-left") ) + parseInt( linedWrapDiv.css("padding-right") );
			var linedWrapDivNewWidth 	= originalTextAreaWidth - paddingHorizontal;
			var textareaNewWidth		= originalTextAreaWidth - sidebarWidth - paddingHorizontal - 20;

			textarea.width( textareaNewWidth );
			linedWrapDiv.width( linedWrapDivNewWidth );
			
			/* React to the scroll event */
			textarea.scroll( function(tn){
				var domTextArea		= $(this)[0];
				var scrollTop 		= domTextArea.scrollTop;
				var clientHeight 	= domTextArea.clientHeight;
				codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
				lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
			});

			/* Should the textarea get resized outside of our control */
			textarea.resize( function(tn){
				var domTextArea	= $(this)[0];
				linesDiv.height( domTextArea.clientHeight + 6 );
			});

		});
	};

  // default options
  $.fn.linedtextarea.defaults = {
  	selectedLine: -1,
  	selectedClass: 'lineselect'
  };
})(jQuery);
</script>

  <style>
    body { background-color: #fafafa; font-family: 'Roboto Condensed'; }
		.container { margin: 150px auto; max-width: 960px; text-align: center;}
		.linedwrap {
		border: 1px solid #c0c0c0;
		padding: 3px;
	}

	.linedtextarea {
		padding: 0px;
		margin: 0px;

	}

	.linedtextarea textarea, .linedwrap .codelines .lineno {
		font-size: 10pt;
		font-family: monospace;
		line-height: normal !important;
	}

	.linedtextarea textarea {
		padding-right:0.3em;
		padding-top:0.3em;
		border: 0;
	}

	.linedwrap .lines {
		margin-top: 0px;
		width: 50px;
		float: left;
		overflow: hidden;
		border-right: 1px solid #c0c0c0;
		margin-right: 10px;
	}

	.linedwrap .codelines {
		padding-top: 5px;
	}

	.linedwrap .codelines .lineno {
		color:#AAAAAA;
		padding-right: 0.5em;
		padding-top: 0.0em;
		text-align: right;
		white-space: nowrap;
	}

	.lined{
		border: none;
		outline: none;
		width: 700px;
	}
  </style>
</head>

<body>
	<div class="container">
		<textarea class="lined" rows="30" cols="60"></textarea>
	</div>
	<script>
		$(function() {
			$(".lined").linedtextarea(
				{selectedLine: 4}
			);
		});
	</script>

</body>
</html>

效果

在这里插入图片描述

实现方式三

这种方式是通过背景图添加行号的，经过测试最大行号是1500行，超过的就不会显示行号了。

代码

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
	<style>
		.lined-textarea {
			background: url(http://i.imgur.com/2cOaJ.png);
			background-attachment: local;
			background-repeat: no-repeat;
			padding-left: 35px;
			padding-top: 10px;
			border-color: #ccc;
			font-size: 13px;
			line-height: 16px;
			resize: none;
			overflow-y:scroll;
			overflow-x:scroll;
			overflow-wrap: normal;
			width:600px;
			border: none;
			outline: none;
		}
	</style>
  </head>

  <body >
	<div>
		<textarea rows="20" cols="30" class="lined-textarea"></textarea>
	</div>
  </body>
</html>

效果

在这里插入图片描述

参考：
Adding Line Numbers To HTML Textarea
HTML Textarea with Line Numbers – jQuery Lined Textarea
Add line numbers to text area using javascript

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/80222.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！