您的位置：首页 > 数据库 > MySQL

CodeMirror实现MySql关键字的变色和自动提示

2015-05-11 22:34 337 查看
最近开发需要，接触到了CodeMirror，觉得的确是个不错的东东。

这里把最常用的两个功能分享给大家。一个是关键字变色一个是自动提示。

先看下最终的效果图。外观还是不错的。可以自己选择主题(codemirror-5.2/theme/ambiance.css)



点击这里下载CodeMirror-5.2

核心代码

<script type="text/javascript" src="js/jquery-1.6.4.source.js"></script>
<link rel="stylesheet" href="js/codemirror-5.2/theme/ambiance.css">
<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/lib/codemirror.css" />
<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/addon/hint/show-hint.css" />
<script type="text/javascript" src="js/codemirror-5.2/lib/codemirror.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/mode/sql/sql.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="js/codemirror-5.2/addon/hint/sql-hint.js"></script>

<style>.CodeMirror {border: 1px solid black;}</style>

<body>
<h2>SQL编辑器</h2>
<form><textarea id="code" name="code"></textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {"Ctrl": "autocomplete"},//输入s然后ctrl就可以弹出选择项
mode: {name: "text/x-mysql"},
theme: "ambiance"//主题
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  CodeMirror 加亮 自动补全 MySql 文本编辑器
相关文章推荐
新的分享
章节导航