requirejs集成百度编辑器ueditor

Ueditor版本:1.4.3.1

---

关键点：

1. 利用requirejs的shim加载editor.all.js并导出到全局变量

2. 通过shim的deps加载 ueditor.config.js 和 ZeroClipboard.min.js

3. 利用init回调方法将ZeroClipboard导出到window对象中，避免因为requirejs导致ZeroClipboard没有加入window对象中，进而导致ueditor找不到ZeroClipboard报错的问题

4. 通过UEDITOR_HOME_URL定义编辑器资源文件根路径

---

具体如下：

1. 配置ueditor模块路径

在requirejs.config的paths参数中，配置ueditor模块中相关文件的路径：

paths: {

'baidueditor': '/assets/libs/ueditor/ueditor.all',

'ueditorconfig': '/assets/libs/ueditor/ueditor.config',

'zeroclipboard': '/assets/libs/ueditor/third-party/zeroclipboard/ZeroClipboard'

}

2. 配置ueditor依赖模块

在requirejs.config的shim参数中，配置ueditor依赖模块：

shim: {

'baidueditor': {

//注意：此处的依赖顺序不能颠倒

deps: ['zeroclipboard','ueditorconfig'],

exports: 'UE',

init:function(ZeroClipboard){

//导出到全局变量，供ueditor使用

window.ZeroClipboard = ZeroClipboard;

}

}

}

3. 定义Ueditor编辑器资源文件根路径

在ueditor.config.js文件中，定义Ueditor编辑器资源文件根路径：

(function () {

window.UEDITOR_HOME_URL = "/assets/libs/ueditor/";

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

...

})();

4. 如何使用

<script id="container" name="content" type="text/plain"></script>

<script type="text/javascript">

require(['baidueditor'],function (UE) {

var editor = UE.getEditor('container');

});

</script>