下載地址：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"); } }; };