JS库codemirror - 输入框代码高亮
评论 0 热度 676
CodeMirror是一款在线的支持语法高亮的代码编辑器,而且支持IE8。
本文使用的版本:5.32.0
注意:近期BOOTCDN貌似停止了对.CC/.TOP等域名的CDN服务,引用库直接返回403ERROR
官网: http://codemirror.net
CDN:http://www.bootcdn.cn/codemirror/
核心代码引入:
<link href="https://cdn.bootcss.com/codemirror/5.32.0/codemirror.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/codemirror/5.32.0/codemirror.js"></script>
monokai主题:
<link href="https://cdn.bootcss.com/codemirror/5.35.0/theme/monokai.min.css" rel="stylesheet">
高亮语言引用(这里引用了css/js/html/php高亮库):
<script src="https://cdn.bootcss.com/codemirror/5.35.0/mode/css/css.min.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.35.0/mode/javascript/javascript.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.35.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdn.bootcss.com/codemirror/5.35.0/mode/php/php.js"></script>
设置:
<textarea id="mycodeta"><gg><h1></h1></gg></textarea>
<script language="Javascript" type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("mycodeta"), {
lineNumbers: true,//显示行数
mode: "php",//实现PHP代码高亮
lineWrapping: true, //实现换行
theme: "monokai", //用monokai的主题
indentUnit: 4, //缩进4个空格
indentWithTabs: true, //tab键缩进代码
extraKeys:{
"Ctrl-Q": function (e) {
e.setOption("fullScreen", !e.getOption("fullScreen"));
}
}//全屏,需引用全屏JS库
});
editor.setSize("100%","500px"); //修改编辑区的大小 (width,height)
editor.setOption("lineNumbers",false); //把显示行数修改为false
editor.getOption("theme");//获取theme的值
</script>
若设置了自动换行后任然会把编辑器撑开,请手动添加CSS代码:
.CodeMirror-wrap pre{word-break: break-all !important;}
若需要使用AJAX,传送的数据建议使用:editor.getValue()
代替textareaID.value
,否则textareaID.value
返回的值有可能是未修改的。如下代码:
$.ajax({
cache:false,
url:"ggpost.php",
type:"post",
data:{
"ncontent":editor.getValue(),
"fename":"index.html",
"folder":"./pan/bookmark/",
"encode":"UTF-8"
},
dataType:"text",
success:function(data){
alert(data);
}
});
若考虑支持IE8:
- 不建议引用压缩过的库,如:
css.min.js
,应引用未压缩过的:css.js
,否则有可能会异常 - 提示
$、jquery
未定义等等错误,有可能是JQ库太新,建议引用旧版本的JQ - 当前最新codemirror的版本(5.32.0)兼容IE8,不必换成旧版