wangEditor支持使用sea.js
进行模块定义,通过一个demo演示一下。
demo的源码结构是这样的:
首先,在js
文件夹中引用jquery
,特别注意——jquery默认是不支持CMD的,必须对源码做出调整。调整内容功能如下:
//调整前:
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
});
}
//调整后:
if ( typeof define === "function") {
define( "jquery", [], function() {
return jQuery;
});
}
因此,调整后的名字修改为jquery-2.2.1-for-seajs.js
。然后在js
文件夹中引用sea.js
然后,创建一个main.js
,将作为启动项在html页面中引用。代码如下:
define(function(require, exports, module){
var $ = require("jquery");
require("wangEditor")($);
$(function(){
// 用来创建编辑器
var editor = new wangEditor("div1");
editor.create();
});
});
最后,创建一个html文件,html文件和main.js
最好在同一个目录下。其中引用seajs
:
<div id="div1">
<p>请输入内容...</p>
</div>
<!--引用seajs-->
<script type="text/javascript" src="sea.js"></script>
<script type="text/javascript">
// seajs 的简单配置
seajs.config({
alias: {
// 相对于 main.js 的路径
"jquery": "./js/jquery-2.2.1-for-seajs",
"wangEditor": "../../dist/js/wangEditor.min"
}
});
// 加载入口模块,即刚刚创建的 main.js
seajs.use("main");
</script>
搞定!
PS:demo源码请参见 https://github.com/wangfupeng1988/wangEditor/tree/master/test/seajs
注意,使用一个浏览器同时浏览requirejs和seajs的demo,可能出现混乱。这两种情况本来就不可共存,浏览demo时也请使用不同浏览器查看效果。