Html中textarea高亮编辑显示代码插件
一、web代码编辑高亮插件
一般在textarea中我们希望使用高亮编辑代码,那么如何可以做到高亮显示?
很多editor web编辑器都有类似的功能,但需要我们手动去修改插件的代码,因此我觉得很不好使!而codemirror这个完全是javascript插件,可以帮助我们实现代码高亮显示,并且在编辑时就可以看到高亮效果。
二、如何使用
压缩包中有很多demo,你可以进入里面查看例子是如何使用的,下面我介绍一下我是如何使用的。
1、加载插件必要的一些javascript和css
<link rel="stylesheet" href="../CodeMirror/lib/codemirror.css"> <link rel="stylesheet" href="../CodeMirror/lib/util/simple-hint.css"> <script src="../CodeMirror/lib/codemirror.js"></script> <script src="../CodeMirror/lib/util/simple-hint.js"></script> <script src="../CodeMirror/lib/util/javascript-hint.js"></script> <script src="../CodeMirror/mode/javascript/javascript.js"></script>
2、添加id和name到textarea属性中
<textarea id="code" name="code"></textarea>
3、接下来添加一段javascript代码
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}} }); $(".CodeMirror-scroll").hover(function(){ $(this).get(0).style.cursor = "text"; });
4、这样就可以实现一个在线的代码编辑器,效果如下:
5、还有一个很重要的问题,那就是如何获取textarea的值
获取方法,根据第3个步骤创建的editor对象,我们来获取
editor.getValue();只有简单这个方法就可以轻松获取。
三、下载使用
如果你想尝试的话,去我资源库下载,也可以去官网附上两个下载链接
官网下载地址:http://codemirror.net/
有问题联系我,欢迎解答!