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

最新推荐文章于 2024-08-06 22:42:31 发布

Timor好心情

最新推荐文章于 2024-08-06 22:42:31 发布

阅读量1.2w

点赞数

分类专栏： CodeMirror 文章标签： CodeMirror 加亮自动补全 MySql 文本编辑器

本文链接：https://blog.csdn.net/qq1142003960/article/details/45651097

版权

CodeMirror 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近开发需要，接触到了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>