使用requirejs来加载CodeMirror编辑器的方法及在线演示

文章标签: RequireJS实例
  • :
  • 01-08 21:05
  • :
  • 30次
  • :
  • 0条
  • 0赞

简介使用requirejs来加载CodeMirror代码编辑器的具体代码方法,及在线实例演示。

站长现在开发WEB的时候,习惯了使用requirejs插件来加载自己所需要的JS文件或JS插件,但在使用requirejs来加载CodeMirror代码编辑器的时候出现了问题。

站长用了将近三个小时的时间来分析,使用requirejs来加载CodeMirror编辑器出错的原因,得出根本原因就是路径的问题。

我们下载CodeMirror的源文件,在源文件的实例演示里,有使用requirejs来加载的实例:

require.config({    
    baseUrl:"../../../",    
    packages: [{    
        name: "codemirror",    
        location: "CodeMirror/5.42.2/",    
        main: "lib/codemirror"    
    }]    
});    
require(["codemirror", "codemirror/mode/htmlmixed/htmlmixed"], function(CodeMirror) {    
    editor = CodeMirror(document.getElementById("code"), {    
        mode: "text/html",    
        lineNumbers: true   
    }); 
});

用上面的方法来加载我们自己的,也就是我们放在WEB下的编辑器时,是没有问题的,但如果要加载CDN上的就不正确了,比如站长用的CDN是这个:

https://www.bootcdn.cn/codemirror/

仔细分析一下就会发现,我们下载的CodeMirror源文件里,codemirror.js位于lib目录之下,而在CDN里,则是直接位于根目录下:

这就是导致我们用requirejs来加载CDN上的CodeMirror编辑器会出错的原因,路径的问题。

下面站长直接给出正确的方法代码:

第一种,配置文件和js文件处于同一个文件时的写法:

require.config({
    paths:{
    "css":[
        "//cdn.bootcss.com/require-css/0.1.10/css.min",
        "../lib/Require-Css/css.min"
    ],
    "jquery":[
        "//cdn.bootcss.com/jquery/1.9.1/jquery.min",
        "../lib/jQuery/jquery.1.9.1.min"
    ],
    "CodeMirror/lib/codemirror":[
        "//cdn.bootcss.com/codemirror/5.42.2/codemirror.min",
        "//cdn.bootcss.com/codemirror/5.42.2/codemirror",
        "/CodeMirror/5.42.2/lib/codemirror"
    ],
    "CodeMirror/mode/htmlmixed/htmlmixed":[
        "//cdn.bootcss.com/codemirror/5.42.2/mode/htmlmixed/htmlmixed.min",
        "//cdn.bootcss.com/codemirror/5.42.2/mode/htmlmixed/htmlmixed",
        "/CodeMirror/5.42.2/mode/htmlmixed/htmlmixed"
    ],
	"CodeMirror/mode/xml/xml":[
        "//cdn.bootcss.com/codemirror/5.42.2/mode/xml/xml.min",
        "//cdn.bootcss.com/codemirror/5.42.2/mode/xml/xml",
        "/CodeMirror/5.42.2/mode/xml/xml"
    ],
    "CodeMirror/mode/javascript/javascript":[
        "//cdn.bootcss.com/codemirror/5.42.2/mode/javascript/javascript",
        "/CodeMirror/5.42.2/mode/javascript/javascript"
    ],
    "CodeMirror/mode/css/css":[
        "//cdn.bootcss.com/codemirror/5.42.2/mode/css/css.min",
        "//cdn.bootcss.com/codemirror/5.42.2/mode/css/css",
        "/CodeMirror/5.42.2/mode/css/css"
    ]
    },
    shim:{
        "CodeMirror/lib/codemirror":{
            deps:[
                'css!CodeMirror/lib/codemirror'
            ]
        }
    }
});
require(["jquery","CodeMirror/lib/codemirror", "CodeMirror/mode/htmlmixed/htmlmixed"], function($,CodeMirror) {
    var editor = CodeMirror.fromTextArea($id,{
        mode: "text/html",
        lineNumbers: true
    });      
});

上面的代码里,站长已经设置好了,在使用的时候,会优先加载CDN上的文件,如果加载失败则加载本地的,本地的CodeMirror编辑器存放的路径是:/CodeMirror/5.42.2/

不过站长自己习惯把配置文件单独放在一个文件里,然后在其它所需要使用CodeMirror编辑器的时候,再用require来加载,这样做的好处就是我们的web项目下,可能不只有一个页面需要引用CodeMirror编辑器,在使用的时候更方便一些。

具体的写法如下:

//把配置文件和下面的代码放到一个JS文件里,如GetCodeMirror.js
//配置文件就是上面代码中的require.config部分:
define(["jquery","CodeMirror/lib/codemirror", "CodeMirror/mode/htmlmixed/htmlmixed"], function($,CodeMirror) {
    var Show=function(id){
        $id=$(id)[0];
        editor = CodeMirror.fromTextArea($id,{
            mode: "text/html",
            lineNumbers: true
        });
        return editor;
    };  
    return {Show:Show};
});

然后在其它页面里需要使用CodeMirror编辑器时,可以这样来调用:

require(['/Inc/GetCodeMirror'],function(CodeMirror){
   var editor=CodeMirror.Show("#CodeEditor"); 
});


您正在找的文章可能是: