百度Ueditor采用requireJS方式使用总结

1、下载控件资料

下载地址：http://ueditor.baidu.com/website/download.html

版本：1.4.3.3 Jsp 版本 UTF-8

2、引入控件

加压后将控件引入项目

百度Ueditor采用requireJS方式使用总结

3、修改RequireJS配置文件

require.config({
   "baseUrl":"/demo",
   "paths" : {
       "ueditor.config":"/ueditor/ueditor.config",
       "ueditor":"/ueditor/ueditor.all",
       "ueditor.zh-cn":"/ueditor/lang/zh-cn/zh-cn",
       "ZeroClipboard":"/ueditor/third-party/zeroclipboard/ZeroClipboard"
   },
   shim : {
       "ueditor.zh-cn": {
           deps:["ueditor.config","ueditor"] // Shim配置需要这样配置以来否则，会出现 not import language file 错误
       }
   }
});

4、新建HTML页面

增加富文本标签：<script id="container" type="text/plain" style="width:1024px;height:500px;"></script>

5、新建HTML对应的JS文件

require(['ZeroClipboard','ueditor.zh-cn'
],function(ZeroClipboard){
   window.ZeroClipboard = ZeroClipboard; //配置需要这样配置以来否则，会出现 ZeroClipboard is undefined 错误

   var DemoController = function() {
       this.init();
   }
   DemoController .prototype = {
       /**
   * 初始化.
   */
   init : function () {
       this.editor = UE.getEditor('container')；
   } }
   /**
   * 开始执行.
   */
   var controller = new DemoController ();

});

6、配置ueditor.config.js中的URL

window.UEDITOR_HOME_URL = "/demo/ueditor/"
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

避免资源加载失败的情况

以上配置完成之后，控件就可以正常加载，具体API使用方法，可以参考百度官方的API文档http://ueditor.baidu.com/website/index.html

百度Ueditor采用requireJS方式使用总结

相关推荐