|-转 在线代码编辑器CodeMirror简介-前端技术
网上看到的不错的文章，这里拿来方便自己查1.什么是Code Mirror最近做一个项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现Code...
网上看到的不错的文章，这里拿来方便自己查
1.什么是Code Mirror
最近做一个项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现Code Mirror刚好满足所有需求。Code Mirror是由js写的一款插件，其功能非常强大,用来实现网页端代码编辑器非常方便。如果想看效果图，可移步到这里----CodeOnline，这是我做的一个小项目，其中代码编辑器的就是用Code Mirror实现的。
2.使用Code Mirror
下面我将演示如何使用Code Mirror搭建一个简易的代码编辑器，并对其常用配置简要介绍。
首先要到Code Mirror官网下载此插件，然后在网页中引入即可。如下代码即实现了一个可以高亮显示Java代码的编辑器：
<!--
最简单的CodeMirror编辑器
-->
<!DOCTYPE
html>
<html>
<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="codemirror-5.12/lib/codemirror.css">
<script src="codemirror-5.12/lib/codemirror.js"></script>
<!--Java代码高亮必须引入-->
<script src="codemirror-5.12/clike.js"></script>
<head>
<title>CodeMirrorTest</title>
</head>
<body>
<textarea id="code"></textarea>
</body>
<script type="text/javascript">
//根据DOM元素的id构造出一个编辑器
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
mode:"text/x-java" //实现Java代码高亮
});
</script>
</html>
如要显示行号，只需在构造editor时加上
lineNumbers:true
即
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{
mode:"text/x-java", //实现Java代码高亮
lineNumbers:true
});
当然，如此简单的编辑器还能不满足我们的需求，接下来我们要为这个编辑器加上如下功能：...
浏览更多内容请先登录。
立即注册
更新于：2020-03-27 01:07:07
推荐内容
