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. 【PHP】最详细PHP从入门到精通（三）——PHP中的数组常用函数汇总

     PHP从入门到精通 之PHP中的数组常用函数详解 数组作为PHP中最常用的结构之一,PHP强大的数组函数功能,给数组的相关操作带来了极大的便利.今天给大家介绍的PHP中数组函数,是PHP数组中重要的 ...

  2. 移动webAPP前端开发技巧汇总

    1. viewport:webapp视图 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是除去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动 ...

  3. phpcms v9 调用自定义字段多图片的第一张或第N张图为缩略图

    1.打开相应要使用组图的模型的组图字段,添加组图 字段提示为 <div class="content_attr"> <label><input typ ...

  4. Linux编程之有限状态机FSM的理解与实现

    有限状态机(finite state machine)简称FSM,表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.FSM是一种逻辑单元内部的一种高效编程方法,在 ...

  5. 类型转换之 PropertyEditorSupport类

    这个类可以用于自定义的类型转换, 子类继承这个类之后可以重写子类的方法 ,其中比较重要的是setAsText和setValue方法,setAsText 子自己的方式处理转换,setValue将转换的结 ...

  6. 「七天自制PHP框架」第四天：模型关联

    往期回顾:「七天自制PHP框架」第三天:PHP实现的设计模式,点击此处 原文地址:http://www.cnblogs.com/sweng/p/6624845.html,欢迎关注:编程老头 前阵子在网 ...

  7. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  8. [leetcode-565-Array Nesting]

    A zero-indexed array A consisting of N different integers is given. The array contains all integers ...

  9. Example018主页加载时获取焦点

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

  10. MySQL(二)--事务与视图

    一.事务 1.提交 2.回滚 3.ACID特性 二.视图 1.创建视图 2.删除视图 3.更新视图 4.使用视图 三.子查询 1. 使用子查询 2. 标量子查询 3. 关联子查询 一.事务 在 RDB ...