JS库codemirror - 输入框代码高亮

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:

  1. 不建议引用压缩过的库,如:css.min.js,应引用未压缩过的:css.js,否则有可能会异常
  2. 提示$、jquery未定义等等错误,有可能是JQ库太新,建议引用旧版本的JQ
  3. 当前最新codemirror的版本(5.32.0)兼容IE8,不必换成旧版

标签: 推荐

添加新评论