requireJS加載codemirror，並且配合angularJs一起使用的時候，高亮顯示代碼編輯器。要注意以下幾點：
1：普通Js加載CodeMirror
代碼如下：
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>編輯器</title> <link rel="stylesheet" type="text/css" href="resources/plugins/bower_components/codemirror/lib/codemirror.css"> <script src="resources/plugins/jquery.1.12.4.min.js"></script> <script src="resources/plugins/bower_components/codemirror/lib/codemirror.js"></script> <script src="resources/plugins/bower_components/angular/angular.min.js"></script> <script src="resources/plugins/bower_components/angular-ui-codemirror/ui-codemirror.min.js"></script> <link rel="stylesheet" type="text/css" href="resources/plugins/bower_components/codemirror/theme/erlang-dark.css"> <script src="resources/plugins/bower_components/codemirror/mode/xml/xml.js"></script> <script type="text/javascript" src="edit.js"></script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <section > <textarea ui-codemirror="cmOption" ng-model="cmModel"></textarea> </section> <!-- <script type="text/javascript"> window.editor = CodeMirror.fromTextArea($("#editorOptions")[0], { //script_once_code為你的textarea的ID號 lineNumbers: true,//是否顯示行號 mode:"xml", //默認腳本編碼 lineWrapping:true, //是否強制換行 }); </script> --> </body> </html>
這里，我使用了ui-codemirror的Angularjs的插件，調用如下
var app = angular.module('myapp',['ui.codemirror']);
app.controller('myCtrl', ['$scope', function ($scope){
$scope.cmOption = {
lineNumbers: true,
indentWithTabs: true,
lineWrapping:true
};
$scope.cmModel = ';; Scheme code in here.\n' +
'(define (double x)\n\t(* x x))\n\n\n' +
'<!-- XML code in here. -->\n' +
'<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>\n\n\n' +
'// Javascript code in here.\n' +
'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}';
}]);
OK，我們能正常看到代碼高亮並且可編輯，效果如下：
2：requireJS加載
require進行加載時，遇到各種問題，簡直吐血，各個之間的依賴，路徑問題，這里講述一下自己遇到的坑。
首先在path里面配置codemirror和xml的路徑，如下：
paths: {
"codemirror":"webresources/js/libs/codemirror/lib/codemirror",
"xml":"webresources/js/libs/codemirror/mode/xml/xml",
}
官網上說的句話，其實用path來配置並沒有什么影響。而且xml.js里面的文件路徑還需要更改。
我們理下之間的依賴關系，XML依賴codemirror，angular-ui-codemirror依賴angularJS ,angular-ui-codemirror加載之前需注入codemirror，直接貼代碼：
'codemirror':{
exports:'codemirror'
},
'xml':{
deps:["codemirror"],
exports:'xml'
},
"angular-ui-codemirror":{
deps: ["angular","codemirror","xml"],
exports: 'angular-ui-codemirror'
}
xml.js下載下來之后，可能與我們的目錄路徑不一樣，所以，我們需要對路徑做相應的更改，如下XML.js文件的路徑如下：
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("webresources/js/libs/codemirror/lib/codemirror.js")); //下載下來的時候為"../../lib/codemirror.js"
else if (typeof define == "function" && define.amd) // AMD
define(["webresources/js/libs/codemirror/lib/codemirror.js"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
}）
之后，我們在建立建立angular.module的時候，需要將codemirror和xml加載進來，並賦給WINDOW,我們在用requireJs的時候，並沒有CodeMirror這個方法
導致一直報錯。而且提示也不明顯，簡直吐血。
解決辦法，代碼如下：
/**
* 建立angular.module
*/
define(['angular',"codemirror","xml"], function (angular, codemirror,xml) {
window.CodeMirror = codemirror ;
var moduleCtrl = angular.module('myapp.controller', ['ui.codemirror']);
return moduleCtrl;
});
Ok,所有東西都已配置到位。話說真的很坑，搞了好久這個問題，吐血。然后，你就可以像普通加載方式一樣，在controller里面進行調用了，效果如下：
作者：婷風
出處：http://www.cnblogs.com/jtjds/p/7263885.html
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者本人同意
轉載文章之后必須在 文章頁面明顯位置給出作者和原文連接否則保留追究法律責任的權利。