Html中textarea⾼亮编辑显⽰代码插件
Html中textarea⾼亮编辑显⽰代码插件
⼀、web代码编辑⾼亮插件
⼀般在textarea中我们希望使⽤⾼亮编辑代码，那么如何可以做到⾼亮显⽰？
很多editor web编辑器都有类似的功能，但需要我们⼿动去修改插件的代码，因此我觉得很不好使！⽽codemirror这个完全是javascript插件，可以帮助我们实现代码⾼亮显⽰，并且在编辑时就可以看到⾼亮效果。
⼆、如何使⽤
压缩包中有很多demo，你可以进⼊⾥⾯查看例⼦是如何使⽤的，下⾯我介绍⼀下我是如何使⽤的。
如何下载javascript1、加载插件必要的⼀些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.ElementById("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对象，我们来获取
三、下载使⽤
如果你想尝试的话，去我资源库下载，也可以去官⽹附上两个下载链接
有问题联系我，欢迎解答！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。