前端页面添加代码编辑区域（css和sql高亮）
前端页面添加代码编辑区域（css和sql高亮）
初级菜鸟，工作遇到了前端页面需要放一块可编辑代码的区域，只需要高亮css和sql语句，就去各种百度，最后使用了codemirror，下面为记录步骤。
1.下载codemirror
官网直接下载，点击DOWNLOAD
2.下载完查看需要用到的css和js
lib目录下的css和js必须导入，然后就在mode里面找到需要的css和sql的js
3.运用到页面中
拿到的1个css和3个js文件引入到项目中
<link rel="stylesheet" type="text/css" href="lib/codemirror.css"/> <script type="text/javascript" src="lib/codemirror.js"></script> <script type="text/javascript" src="js/css.js"></script> <script type="text/javascript" src="js/sql.js"></script>
html中代码
<body> <textarea name="editor" id="editor"></textarea> </body>
自己本地的js文件中加入代码，这段代码参考codemirror的demo目录下的changemode.html文件
<script type="text/javascript">
myTextarea = document.getElementById("editor");
var editor = CodeMirror.fromTextArea(myTextarea, {
// mode: "text/x-mysql",
lineNumbers: true,//显示行数
matchBrackets: true, // 括号匹配（这个需要导入codemirror的matchbrackets.js文件）
});
var pending;
editor.on("change", function() {
clearTimeout(pending);
pending = setTimeout(update,200);
});
function looksLikeScheme(code) {
//正则表达式，判断textarea中输入的是否是sql语句
return /^select[sS]*/.test(code) || /^insert.*$/.test(code) || /^delete.*$/.test(code) || /^update.*$/.test(code);
}
function update() {
//如果输入是sql语句，则给editor设置mode属性为mysql，否则为css
editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "text/x-mysql" : "text/css");
}
</script>
4.测试
我要的高亮css和sql可以实现了。
