RequireJs加载Codemirror,配合AngularJS的坑

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,我们能够正常看到代码高亮并且可编制,效果如下:

AngularJS 1

2:requireJS加载

  require进行加载时,遇到各种问题,简直吐血,各个之间的倚重,路径问题,这里讲述一下要好遇到的坑。

  首先在path里面配备codemirror和xml的路,如下:

paths: {
    "codemirror":"webresources/js/libs/codemirror/lib/codemirror",
    "xml":"webresources/js/libs/codemirror/mode/xml/xml",
}

AngularJS 2

  官网上说的句话,其实用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这个点子

致直接报错。而且提示也非明明,简直吐血。

AngularJS 3

 解决办法,代码如下:

/**
 * 建立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里面进行调用了,效果如下:

 AngularJS 4


 

作者:婷风

 出处:http://www.cnblogs.com/jtjds/p/7263885.html 

 如果您当看本文对你发出帮衬,请点转“推荐”按钮,您的“推荐”将凡本人最好充分之编著动力!欢迎各位转载,但是未经作者本人同意 

转载文章后要以
文章页面明显位置给起作者与原文连接否则保留追究法律责任的权。

 

 

  

  

相关文章