下载地址：http://ueditor.baidu.com/website/download.html
建议同时下载所需版本及完整源码。 [ 1.4.3 JSP + 完整源码src ]
简单配置说明
解压JSP版，放置项目中。
1，引入所需文件；
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/ueditor.config.js"></@script> <@script type="text/javascript" src="${page.url.context}/res/components/ueditor/ueditor.all.js"></@script> <@script type="text/javascript" src="${page.url.context}/res/components/ueditor/lang/zh-cn/zh-cn.js"></@script>
2，实例化编辑器；
方法一：
<body> <div> <script id="editor" type="text/plain"></script> </div> </body> <script type="text/javascript"> var ue = UE.getEditor( 'editor',{ autoHeightEnabled: true, autoFloatEnabled: true, initialFrameWidth: 690, initialFrameHeight:483 }); </script>
方法二：
<textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea> var editor = new UE.ui.Editor(); editor.render("myEditor");
效果图；
通过ueditor.config.js文件简单进行自己所需配置。
自定义按钮）
1，将addCustomizeButton.js文件拷贝至项目，引入。（解压完整源码包_examples目录可找到该文件）
<@script type="text/javascript" src="${page.url.context}/res/components/ueditor/addCustomizeButton.js"></@script>
根据注释修改addCustomizeButton.js文件，（以下自定义添加图片按钮）
// 如果要注册多个按钮以空格标识隔开，例如注册按钮1 按钮2 按钮3 UE.registerUI('1 2 3',function(editor,uiName){} UE.registerUI('\u63d2\u5165\u56fe\u7247',function(editor,uiName){ //上传成功回调函数 var onFileUploadComplete = function(res) { var length = res.successful.length; if( length > 0 ) { var nodes = res.successful; for (var i = 0 ; i < nodes.length ; i++) { var url = Alfresco.constants.PROXY_URI; var nodeID = nodes[i].nodeRef.replace("workspace://SpacesStore/","api/node/workspace/SpacesStore/"); url = url + nodeID + "/content/doclib?c=force&ph=true"; //追加编辑器预览图片效果 editor.setContent('<img style="width:650px;" src="'+url+'" alt="'+nodes[i].fileName+'" title="'+nodes[i].fileName+'"/>',true); //editor.setContent("content...",boolean); 如果boolean为true ,追加编辑器内容，否则编辑器内容写入。 } } }; //注册按钮执行时的command命令，使用命令默认就会带有回退操作 editor.registerCommand(uiName,{ execCommand:function(){ //alert('execCommand:' + uiName) // TODO self something this.fileUpload = Alfresco.getFileUploadInstance(); var multiUploadConfig = { //destination:"workspace://SpacesStore/56b62ff0-d06d-4928-ba7a-7c4e4a17aaab", destination: "JY", thumbnails: "doclib", filter: [//限制只能上传*.jpg;*.png;*.gif { description:"images", extensions:"*.jpg;*.png;*.gif" }], mode: this.fileUpload.MODE_MULTI_UPLOAD_FUJIAN, viewdetail:false, onFileUploadComplete: { fn: onFileUploadComplete, scope: this } }; this.fileUpload.show(multiUploadConfig); } }); //创建一个button var btn = new UE.ui.Button({ //按钮的名字 name:uiName, //提示 title:uiName, //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon cssRules :'background-position: -726px -77px;',// 使用多图上传icon //点击时执行的命令 onclick:function () { //这里可以不用执行命令,做你自己的操作也可 editor.execCommand(uiName); } }); //当点到编辑内容上时，按钮要做的状态反射 editor.addListener('selectionchange', function () { var state = editor.queryCommandState(uiName); if (state == -1) { btn.setDisabled(true); btn.setChecked(false); } else { btn.setDisabled(false); btn.setChecked(state); } }); //因为你是添加button,所以需要返回这个button return btn; }/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);
效果图；
UEditor1.4.3版本存在系列问题处理：
1,启动自动保存；enableAutoSave: false设置无效。解决办法；修改ueditor.all.js文件；添加代码：if (!me.getOpt('enableAutoSave')) {return;}
'contentchange': function () { // 去掉本地保存 1.4.3 enableAutoSave: false设置无效 if (!me.getOpt('enableAutoSave')) { return; } // if ( !saveKey ) { return; } if ( me._saveFlag ) { window.clearTimeout( me._saveFlag ); } if ( me.options.saveInterval > 0 ) { me._saveFlag = window.setTimeout( function () { save( me ); }, me.options.saveInterval ); } else { save(me); } }
2，插入表格保存后，获取保存内容预览表格边框不显示。修改ueditor.all.js文件以下几处。
UE.commands['inserttable'] = { queryCommandState: function () { return getTableItemsByRange(this).table ? -1 : 0; }, execCommand: function (cmd, opt) { function createTable(opt, tdWidth) { var html = [], rowsNum = opt.numRows, colsNum = opt.numCols; for (var r = 0; r < rowsNum; r++) { html.push('<tr' + (r == 0 ? ' class="firstRow"':'') + '>'); /* old code for (var c = 0; c < colsNum; c++) { html.push('<td width="' + tdWidth + '" vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>') }*/ // new code for (var c = 0; c < colsNum; c++) { html.push('<td style="border:1px solid #ccc;" width="' + tdWidth + '" vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>') } html.push('</tr>') } //禁止指定table-width // old code //return '<table><tbody>' + html.join('') + '</tbody></table>' // new code return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>' } if (!opt) { opt = utils.extend({}, { numCols: this.options.defaultCols, numRows: this.options.defaultRows, tdvalign: this.options.tdvalign }) } var me = this; var range = this.selection.getRange(), start = range.startContainer, firstParentBlock = domUtils.findParent(start, function (node) { return domUtils.isBlockElm(node); }, true) || me.body; var defaultValue = getDefaultValue(me), tableWidth = firstParentBlock.offsetWidth, tdWidth = Math.floor(tableWidth / opt.numCols - defaultValue.tdPadding * 2 - defaultValue.tdBorder); //todo其他属性 !opt.tdvalign && (opt.tdvalign = me.options.tdvalign); me.execCommand("inserthtml", createTable(opt, tdWidth)); } };
//设置表格可排序,清除表格可排序 UE.commands["enablesort"] = UE.commands["disablesort"] = { queryCommandState: function (cmd) { var table = getTableItemsByRange(this).table; if(table && cmd=='enablesort') { var cells = domUtils.getElementsByTagName(table, 'th td'); for(var i = 0; i<cells.length; i++) { if(cells[i].getAttribute('colspan')>1 || cells[i].getAttribute('rowspan')>1) return -1; } } return !table ? -1: cmd=='enablesort' ^ table.getAttribute('data-sort')!='sortEnabled' ? -1:0; }, execCommand: function (cmd) { var table = getTableItemsByRange(this).table; table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled"); table.setAttribute("style", "border-collapse:collapse;");// append new code cmd == "enablesort" ? domUtils.addClass(table,"sortEnabled"):domUtils.removeClasses(table,"sortEnabled"); } }; };