RequireJs加载Codemirror，同盟AngularJS的坑

无评论

 OK，大家能健康看到代码高亮并且可编写制定，效果如下：

　　

　　大家理下之间的重视性关系，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'
}

作者：婷风

1：普通Js加载CodeMirror

　　require实行加载时，遭受种种题材，简直目赤，各种之间的依靠，路径难题，那里讲述一下祥和际遇的坑。

　　官网上说的句话，其实用path来配置并从未什么样震慑。而且xml.js里面包车型地铁公文路径还须要改变。

AngularJS，　

　　xml.js下载下来今后，或许与大家的目录路径分化等，所以，大家必要对路线做相应的改观，如下XML.js文件的不二法门如下：

转发著作之后必须在
小说页面鲜明地点给出我和原来的书文连接不然保留追究法律权利的义务。

 假若您觉得阅读本文对你有救助，请点一下“推荐”按钮，您的“推荐”将是自个儿最大的作文引力！欢迎各位转发，不过未经小编本身同意 

AngularJS 1

　之后，大家在创设建立angular.module的时候，必要将codemirror和xml加载进来，并赋给WINDOW,咱们在用requireJs的时候，并没有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>

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,全部东西都已配备到位。话说真的很坑，搞了旷日持久这么些标题，惊痫。然后，你就足以像平日加载情势一样，在controller里面举办调用了，效果如下：

requireJS加载codemirror，并且合营angularJs一起利用的时候，高亮展现代码编辑器。要留意以下几点：

　消除办法，代码如下：

2：requireJS加载

AngularJS 2

/**
 * 建立angular.module
 */
define(['angular',"codemirror","xml"], function (angular, codemirror,xml) {
　　　　 window.CodeMirror = codemirror ;
    var moduleCtrl = angular.module('myapp.controller', ['ui.codemirror']);
    return moduleCtrl;
});

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

　　

(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) {
}）

　　首先在path里面配备codemirror和xml的路子，如下：

　

　AngularJS 3

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

导致直接报错。而且提醒也不明明，简直喉肿。

AngularJS 4

 

那边，作者利用了ui-codemirror的Angularjs的插件，调用如下

　  代码如下：

相关文章