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. ZooKeeper源码分析-Jute-第一部分

    Hadoop record I/O 包含class文件以及record描述语言解释器用于简化records的序列化和反序列化. 介绍 任何显著复杂性的软件系统都需要与外界进行数据交换的机制.数据交互通 ...

  2. CSS3的使用方法解析

    自己过去有段时间使用CSS3开发过一些小的部件和效果,但是由于太久没有再次去使用,导致当自己再次去使用的时候我就需要去翻手册重新找一次然后按着方法使用才可以. 现在我就把这份CSS3的使用技巧展示给各 ...

  3. WPF Dashboard仪表盘控件的实现

    1.确定控件应该继承的基类 从表面上看,目前WPF自带常用控件中,没有一个是接近这个表盘控件的,但将该控件拆分就能够发现,该控件的每个子部分都是在WPF中存在的,因此我们需要将各个子控件组合才能形成这 ...

  4. Nmap脚本文件分析（AMQP协议为例）

    Nmap脚本文件分析(AMQP协议为例) 一.介绍 上两篇文章 Nmap脚本引擎原理   编写自己的Nmap(NSE)脚本,分析了Nmap脚本引擎的执行过程,以及脚本文件的编写,这篇文章将以解析AMQ ...

  5. eclipse下启动tomcat项目，访问tomcat默认端口显示404错误

    解决:打开eclipse的server视图,双击你配置的那个tomcat,打开编辑窗口,查看server locations,看看是否选择了第一个选项(默认是第一个选项),即use workspace ...

  6. input响应慢问题解决办法

    input[file]标签的accept属性可用于指定上传文件的 MIME类型 . 例如,想要实现默认上传图片文件的代码,代码可如下: <input type="file" ...

  7. js中年份、月份下拉框

    <select id="year" style="width: 100px;"></select> <select id=&quo ...

  8. web前端面试总结(二)

    这段时间大大小小面试确实不少,相对之前那篇被虐到体无完肤这几次确实相对来说有很大进步这里总结一下: 1.发现自己,站在个人角度我还是挺赞成出去面试的,不管你对现在的公司是否满意,当你觉得在这里已经有一 ...

  9. webpack 实现的多入口项目脚手架

    简介 基于 webpack2 实现的多入口项目脚手架,主要使用 extract-text-webpack-plugin 实现 js .css 公共代码提取,html-webpack-plugin 实现 ...

  10. angularJS directive详解（自定义指令）

    Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...