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. 在Windows上远程运行Linux程序

    1.在Windows主机上安装X Server软件,如Cygwin带的XWin Server 2.在Windows主机上启动X服务器,并将Linux主机设为允许访问该Windows主机上的X服务器. ...

  2. C# 通过Bartender模板打印条码,二维码, 文字, 及操作RFID标签等。

    1.在之前写的一篇文章中, 有讲到如何利用ZPL命令去操作打印里,  后面发现通过模板的方式会更加方便快捷, 既不用去掌握ZPL的实现细节, 就可以轻松的调用实现打印的功能. 解决方案: 1.网络下载 ...

  3. python 标准库 -- logging

    线程安全的日志记录模块. 一. 使用示例 import logging logging.basicConfig(filename="app.log", format="% ...

  4. java源码学习（三）Enum

    Enum Enum类是java.lang包中一个类,他是Java语言中所有枚举类型的公共基类. 一.定义 public abstract class Enum<E extends Enum< ...

  5. RabbitMQ安装与初始配置

    [TOC] 本文只讨论linux下的Rabbitmq安装. Erlang安装 rabbitmq依赖于Erlang,需先安装,推荐安装rabbitmq/erlang-rpm: #clone源码 git ...

  6. UE4 difference between servertravel and openlevel(多人游戏的关卡切换)

    多人游戏的关卡切换分为无缝和非无缝.非无缝切换时,客户端将跟服务器断开连接,然后重新连接到同一个服务器,服务器则加载一个新地图.无缝切换不会发生这样的情况. 有三个函数供我们使用:UEngine::B ...

  7. JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题

    前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bo ...

  8. 使用Scribefire在博客中插入语法高亮 II

    效果如下, 这是我们在Scribefire中添加的code按钮,单击此按钮,则会出现 在codeHere中直接输入代码就可以了. 查看html 可以看到,其中已经添加了<pre>标签. 下 ...

  9. Linux实战教学笔记13:定时任务补充

    第十三节 定时任务补充 标签(空格分隔): Linux实战教学笔记 ---[更多资料点我查看][1] 1,生产环境常用Crontab专业实例 1.1书写crontab定时任务多个基本要领 1.1.1 ...

  10. 懒人的小技巧, 批处理修改IP

    相信很多人都有这样的麻烦, 工作单位的IP网段与住的不一致, 自己的笔记本在单位和回家的时候每次都要更改IP, 很麻烦,  偷个懒, 做了个批处理来修改IP,方便一点. 还有就是可以把工作的时候才需要 ...