CodeMirror是一款在线的支持语法高亮的代码编辑器，而且支持IE8。
本文使用的版本：5.32.0
注意：近期BOOTCDN貌似停止了对.CC/.TOP等域名的CDN服务，引用库直接返回403ERROR

官网： http://codemirror.net
CDN：http://www.bootcdn.cn/codemirror/

核心代码引入：

1
2
<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主题：

1
<link href="https://cdn.bootcss.com/codemirror/5.35.0/theme/monokai.min.css" rel="stylesheet">

高亮语言引用(这里引用了css/js/html/php高亮库)：

1
2
3
4
<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>

设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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代码：

1
.CodeMirror-wrap pre{word-break: break-all !important;}

若需要使用AJAX，传送的数据建议使用：editor.getValue()代替textareaID.value，否则textareaID.value返回的值有可能是未修改的。如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  $.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，不必换成旧版