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. AVAudioFoundation(2)：音视频播放

    本文转自:AVAudioFoundation(2):音视频播放 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 要播放 AVA ...

  2. React.js 小书介绍

    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...

  3. Swift 求余运算

    求余运算 求余运算(a % b)是计算b的多少倍刚刚好可以容入a,返回多出来的那部分(余数). 注意:求余运算(%)在其他语言也叫取模运算.然而严格说来,我们看该运算符对负数的操作结果,"求 ...

  4. JavaScript中的排序

    <script> //1. 冒泡排序 function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len ...

  5. video+ audio

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. WCF学习——构建第二个WCF应用程序（六）

    一.创建客户端应用程序 若要创建客户端应用程序,你将另外添加一个项目,添加对该项目的服务引用,配置数据源,并创建一个用户界面以显示服务中的数据.若要创建客户端应用程序,你将另外添加一个项目,添加对该项 ...

  7. Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  8. echarts的部署和使用

    echarts是百度开发的一款商业级.开源免费的前端图表组件,具体可访问其主页:http://echarts.baidu.com/ echarts目前已经发布了2.0版本,使用起来非常的方便,并且效果 ...

  9. tp框架---View视图层---模板继承（举例说明）

    当我们做动态页面时,我们会发现一个网站的头部和尾部是相同的,那么我们如何用tp框架来做模板呢 ? 先看一下注意事项: (1)每个区块由<block></block>标签组成 ( ...

  10. C#传入一个时间值，判断年月日时分秒

    /// <summary> /// 功能:某张表的一个时间字段更新的时间停止了多久(和数据库现在的时间比较) /// keyname:数据库参数 ///BGDataService.Quer ...