代码高亮输入框实现
2017-01-23 12:22
316 查看
原文来自搬砖工，如需转载请注明出处
个人建站专栏 java基础专栏 ssh专栏
对于编程人员来说，w3cschool和菜鸟网站这两个站点都或许不陌生。在它们的教程中间时不时地会给我们显示一个“试一试”的特殊按钮，来实现代码的在线运行。如下图
在w3cschool网站上面的代码编辑框里面编辑的代码是一个颜色的，而且不会“比较智能”得进行括号匹配，对于各种语言的关键词匹配也没有。博主本想自己来尝试做一个插件类型的代码编辑框，实现代码高亮。但是在菜鸟网站上面的在线编辑框感觉非常亮眼，最开始以为是菜鸟网站自己做的插件。但是忍不住内心的好奇，把网页源码看了一下，结果发现了一个对外发布的js文件——codemirror.min.js。上网搜索了一下，这个是专门的一个生成在线文本编辑框的工具。官网是：http://codemirror.net/
大致地看了一下官网，说的是必要文件是codemirror.css和codemirror.min.js。于是将两个文件导入一个测试页面，根据说明产生了一个比较简单的页面。如下：
代码：
生成的页面实现了简单的代码编辑，CodeMirror.fromTextArea这个函数就是从某个区域内初始化一些代码到编辑框来。同时可以设置参数，比如显示行数，换行空多少等等。还有许多其他参数，有兴趣的小伙伴可以去官网详细了解。但是问题来了，代码高亮如何实现？按照我的正常思维，js文件中一定要有piblic、static类似的字才能进行某种匹配，然后再赋某种颜色。在js文件中并未找到这些匹配字典，应该还缺少什么文件。于是去菜鸟源码再看看，在另外一个js文件中博主找到了这些字典。页面引入js，发现代码高亮实现了。如图：
我们可以把编辑框给它添加一些外层嵌套来限制显示的大小。博主给一个示例：
最终效果还是不错的。这样的编辑器大致是这么实现的：
1.首先就是对样式的设计和分解，把设计好的样式分成组件，比如说行数以及行数灰边
2.通过js来动态生成每行并且控制换行时该对于一行该如何进行换行（比如if下面的换行就是向后缩进，普通的是在一个竖线上）
3.最后就是关键字，通过字典在动态生成的时候给关键字赋颜色。当然，每个词语肯定是在一个标签里面的。
4.光标是改变一个黑色竖线的显示和隐藏来实现的（因为不是生成的text输入框，而是div）
5.最后就是其他功能的实现的，比如说括号匹配啊什么的。这些就能完善我们的用户体验，比如说，输入前括号，当你输入与之匹配的括号时，它会自动判断匹配括号应该出现的位置等等。
大致地设计思想和功能差不多就是这样子。如果有喜欢的同学可以参考博主的文章进行操作。
个人建站专栏 java基础专栏 ssh专栏
对于编程人员来说，w3cschool和菜鸟网站这两个站点都或许不陌生。在它们的教程中间时不时地会给我们显示一个“试一试”的特殊按钮，来实现代码的在线运行。如下图
在w3cschool网站上面的代码编辑框里面编辑的代码是一个颜色的，而且不会“比较智能”得进行括号匹配，对于各种语言的关键词匹配也没有。博主本想自己来尝试做一个插件类型的代码编辑框，实现代码高亮。但是在菜鸟网站上面的在线编辑框感觉非常亮眼，最开始以为是菜鸟网站自己做的插件。但是忍不住内心的好奇，把网页源码看了一下，结果发现了一个对外发布的js文件——codemirror.min.js。上网搜索了一下，这个是专门的一个生成在线文本编辑框的工具。官网是：http://codemirror.net/
大致地看了一下官网，说的是必要文件是codemirror.css和codemirror.min.js。于是将两个文件导入一个测试页面，根据说明产生了一个比较简单的页面。如下：
代码：
<!DOCTYPE html>
<html>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="codemirror.css">
<script src="codemirror.min.js" type="text/javascript"></script>
</head>
<body>
<textarea class="form-control" id="code" name="code" rows="12" style="display: none;">
public class HelloWorld {
public static void main(String []args) {
System.out.println("Hello World!");
}
}
</textarea>
<!--<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>-->
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-java",
indentUnit: 4,
indentWithTabs: true,
});
</script>
</body>
</html>效果：生成的页面实现了简单的代码编辑，CodeMirror.fromTextArea这个函数就是从某个区域内初始化一些代码到编辑框来。同时可以设置参数，比如显示行数，换行空多少等等。还有许多其他参数，有兴趣的小伙伴可以去官网详细了解。但是问题来了，代码高亮如何实现？按照我的正常思维，js文件中一定要有piblic、static类似的字才能进行某种匹配，然后再赋某种颜色。在js文件中并未找到这些匹配字典，应该还缺少什么文件。于是去菜鸟源码再看看，在另外一个js文件中博主找到了这些字典。页面引入js，发现代码高亮实现了。如图：
我们可以把编辑框给它添加一些外层嵌套来限制显示的大小。博主给一个示例：
<!DOCTYPE html>
<html>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="codemirror.css">
<script src="codemirror.min.js" type="text/javascript"></script>
<script src="clike.js" type="text/javascript"></script>
<style>
.CodeMirror {
line-height: 1.3em;
font-family: monospace;
/* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */
position: relative;
/* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */
overflow: hidden;
background-color: white;
width: 100%;
height:254px;
margin-bottom: 9px;
color: #555555;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.CodeMirror-focused {
/* Copied from Bootstrap's textarea */
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.editor_control{
width:520px;
}
</style>
</head>
<body>
<div class="editor_control">
<textarea class="form-control" id="code" name="code" rows="12" style="display: none;">
public class HelloWorld {
public static void main(String []args) {
System.out.println("Hello World!");
}
}
</textarea>
<div>
<!--<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>-->
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-java",
indentUnit: 4,
indentWithTabs: true,
});
</script>
</body>
</html>效果：最终效果还是不错的。这样的编辑器大致是这么实现的：
1.首先就是对样式的设计和分解，把设计好的样式分成组件，比如说行数以及行数灰边
2.通过js来动态生成每行并且控制换行时该对于一行该如何进行换行（比如if下面的换行就是向后缩进，普通的是在一个竖线上）
3.最后就是关键字，通过字典在动态生成的时候给关键字赋颜色。当然，每个词语肯定是在一个标签里面的。
4.光标是改变一个黑色竖线的显示和隐藏来实现的（因为不是生成的text输入框，而是div）
5.最后就是其他功能的实现的，比如说括号匹配啊什么的。这些就能完善我们的用户体验，比如说，输入前括号，当你输入与之匹配的括号时，它会自动判断匹配括号应该出现的位置等等。
大致地设计思想和功能差不多就是这样子。如果有喜欢的同学可以参考博主的文章进行操作。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【转载】word中实现代码高亮的宏
- 代码即时高亮源码,delphi实现
- 用vim实现博客中的代码高亮
- jQuery 自动增长的文本输入框实现代码
- 简单代码autocomplete="off"实现禁用input输入框的自动提示功能
- 用javascript实现输入框的输入推荐代码
- Javascript实现的CSS代码高亮显示
- asp.net 为FCKeditor开发代码高亮插件实现代码
- 两种简单实现菜单高亮显示的JS类代码
- javascript实现仿银行密码输入框效果的代码
- [导入]自己动手实现 lucene 搜索代码高亮显示
- 自己动手实现 lucene 搜索代码高亮显示
- Javascript实现的CSS代码高亮显示
- FCKEditor SyntaxHighlighter整合实现代码高亮显示
- 用js查找法实现当前栏目的高亮显示的代码
- javascript实现仿银行密码输入框效果的代码
- 实现aspx页面中，获得焦点，高亮显示，离开时恢复 效果（完整代码）
- flex 实现全文检索中的高亮显示代码
- 两种简单实现菜单高亮显示的JS类代码