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

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意

转载文章之后必须在 文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。

　

　

　　

　　

RequireJs加载Codemirror，配合AngularJS的坑的更多相关文章

  1. 47.使用 RequireJS 加载 AngularJS

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 目前的版本没有遵循 Javascript 约定的 AMD 模块化规范, 因此使用 Requ ...

  2. requireJS 加载css、less文件

    -- requireJS 同样可以加载css 文件,有require-css的插件,只需要把插件放入main.js同文件夹,在依赖处 采用 ‘css! test.css’的形式就可以加载css文件 - ...

  3. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  4. RequireJS 加载 easyui

    requireJS 可以让js加载起来比较优雅,像java里import一样.有了这个,我们可以创建自己的 js控件库,在需要时,页面中只引入 requireJS,然后通过代码方式引入需要用到的控件, ...

  5. Requirejs加载超时问题的一个解决方法：设置waitSeconds=0

    有时Requirejs会遇到加载js超时问题 除了排查js脚本问题,网络问题以外的一个解决方法是加大Require的等待时间waitSeconds,或者直接设置为0,这个参数的意义是:The numb ...

  6. Unity 5.x动态加载光照信息（所有坑已踩）

    能搜到这的应该是被新的烘焙系统坑了少时间,4.x到5.x美术必须重新烘焙,关于美术的没什么说的,只有---重新烘焙! 新的烘焙系统,为了兼容5.x的多场景编辑功能,将烘焙信息从mesh全部挪到了一个中 ...

  7. requirejs加载css样式表

    1. 在 https://github.com/guybedford/require-css 下载到require-css包 2. 把css.js或者css.min.js复制到项目的js目录下 3. ...

  8. RequireJS加载ArcGIS API for JavaScript

    1.在main.js中配置ArcGIS API for JavaScript require.config({ paths : { //arcgisJS "esri": " ...

  9. JPA数据懒加载LAZY配合事务@Transactional使用(三)

    上篇博文<JPA数据懒加载LAZY和实时加载EAGER(二)>讲到,如果使用懒加载来调用关联数据,必须要保证主查询session(数据库连接会话)的生命周期没有结束,否则,你是无法抽取到数 ...

随机推荐

  1. TypeScript技巧集锦(陆续更新)

    在C++项目中编译TypeScript(以下简称ts) 编辑ts文件的属性,项类型选择"自定义生产工具". 命令行输入tsc所在位置与编译参数,我的是"C:\Progra ...

  2. 【解决】使用compass watch xxx.scss 失败

    原始日期:2016-01-25 16:49 在上一篇博客,我们终于安装好了compass,不过紧接着使用compass watch app.scss 结果失败,经过查询资料,是compass的版本问题 ...

  3. iOS-Core-Animation-Advanced-Techniques（一）

    视图(UIView)和图层(CALayer)的关系: 每一个UIview都有一个CALayer实例的图层属性,视图的职责就是创建并管理这个图层,以确保当子视图在层级关系中添加或者被移除的时候,他们关联 ...

  4. Intel VT-x 处于禁用状态

    出现错误"此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态"的问题,如下图. Intel VT-x 即Virtualization Technology, ...

  5. 大话Python格式化输出字符串

    1."{},{}".format(,)用法总结: '{0},{1}'.format('var1',132908) 'var1,132908' '{},{}'.format('var ...

  6. 使用zabbix_agent监控第一台windows服务器

    解压windows客户端压缩包 bin目录下会有win32和win64俩个文件夹,根据windows系统的版本自行进行选择,将客户端程序文件拷贝至C:\zabbix 将conf文件中的zabbix_a ...

  7. Matlab: 作图

    控制图的大小 figure('position',[x0,y0,dx,dy]); figure(fig number); 显示图例 legend('leg1','leg2') depend on ho ...

  8. workerman启动失败解决

    提示stream_socket_server(): unable to connect to tcp://0.0.0.0:2120 (Address already in use)php xxx.ph ...

  9. 【Android Developers Training】 89. 最大化的使用谷歌云消息（Google Cloud Messaging）

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  10. 【巨杉答疑】巨杉数据库和mongodb有什么关系吗？

    哈罗,艾瑞巴蒂~巨杉答疑栏目今日上线啦! 巨杉数据库作为商业化开源软件,已经拥有大量社区用户.开源至今,大到分布式数据库原理.架构问题,小到SDB巨杉数据库的安装使用问题,大家似乎都有很多问题想要和我 ...