ueditor線上文檔： http://fex.baidu.com/ueditor/#server-config
為了友善開發學習，我們下載下傳它的完整版和.net版。
<a href="http://files.cnblogs.com/files/janes/ueditor_release_ueditor1_4_3_1-src.zip">ueditor_release_ueditor1_4_3_1-src.zip</a>
<a href="http://files.cnblogs.com/files/janes/ueditor_release_ueditor1_4_3_1-gbk-net.zip">ueditor_release_ueditor1_4_3_1-gbk-net.zip</a>
下載下傳包的index.html是編輯器示例，主要幾處代碼如下：
<head> …… <!--編輯器基本配置--> <script type="text/javascript" charset="gbk" src="ueditor.config.js"></ script> <!--編輯器完整代碼--> <script type="text/javascript" charset="gbk" src="ueditor.all.js"> </script > …… </head> <body> <div> <script id="editor" type="text/plain"></ script> </div> <script type="text/javascript"> //執行個體化編輯器 var ue = UE.getEditor( 'editor', { autoHeightEnabled: true, autoFloatEnabled: true, initialFrameWidth: 690, initialFrameHeight:483 }); </script>
ueditor功能強大，但是有些功能我們是用不到的，可以在ueditor.config.js中配置。搜尋"toolbars"找到工具欄配置項，删掉不必要的功能就可以了。
,toolbars: [[ 'undo', 'redo' , '|', 'bold', 'forecolor' , 'removeformat', 'autotypeset', 'pasteplain' , '|', '|', 'justifyleft', 'justifycenter' , '|', 'link', 'unlink' , '|', 'insertimage', 'insertvideo' , '|', 'wordimage', '|' , 'inserttable', 'insertrow' , 'deleterow', 'insertcol', 'deletecol' , 'mergecells', 'splittocells', '|' , 'mybtn1','mydialog1' ]]
如果想修改編輯器預設的字型等，可以找打開ueditor.all.js，搜尋editor.js中的"render:"方法，修改以下部分：
var html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') + '<html xmlns=\'http://www.w3.org/1999/xhtml\' class=\'view\' ><head>' + '<style type=\'text/css\'>' + //設定四周的留邊 '.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' + //設定預設字型和字号 //font-family不能呢随便改，在safari下fillchar會有解析問題 'body{margin:8px;font-family:sans-serif;font-size:16px;}' + //設定段落間距 'p{margin:5px 0;}</style>' + ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) + (options.initialStyle ? '<style>' + options.initialStyle + '</style>' : '') + '</head><body class=\'view\' ></body>' + '<script type=\'text/javascript\' ' + (ie ? 'defer=\'defer\'' : '' ) +' id=\'_initialScript\'>' + 'setTimeout(function(){editor = window.parent.UE.instants[\'ueditorInstant' + me.uid + '\'];editor._setup(document);},0);' + 'var _tmpScript = document.getElementById(\'_initialScript\');_tmpScript.parentNode.removeChild(_tmpScript);</script></html>';
修改\dialogs\image\image.js檔案的initAlign()和setAlign方法。
如果現有的功能不能滿足需求，我們想在工具欄上新增一個自定義按鈕，該如何實作呢？
1.首先修改ueditor.config.js，為toolbars添加'mybtn1';
'inserttable', 'insertrow' , 'deleterow', 'insertcol', 'deletecol' , 'mergecells', 'splittocells', '|' , 'mybtn1'
2.然後修改ueditor.all.js，找到變量btnCmds，添加'mybtn1';
var btnCmds = ['undo' , 'redo', 'formatmatch', 'bold', 'italic' , 'underline', 'fontborder', 'touppercase' , 'tolowercase', 'strikethrough', 'subscript' , 'superscript', 'source', 'indent' , 'outdent', 'blockquote', 'pasteplain' , 'pagebreak', 'selectall', 'print' ,'horizontal', 'removeformat', 'time' , 'date', 'unlink', 'insertparagraphbeforetable', 'insertrow' , 'insertcol', 'mergeright', 'mergedown' , 'deleterow', 'deletecol', 'splittorows' , 'splittocols', 'splittocells', 'mergecells' , 'deletetable', 'drafts', 'mybtn1' ];
3.最後在ueditor.all.js，新增mybtn1指令執行的代碼：
UE.commands['mybtn1'] = { execCommand: function (cmdName, align) { var range = this .selection.getRange(); this.execCommand('inserthtml' , '<p>click mybtn1</p>'); return true ; } };
這樣就完成了對工具欄功能的擴充。
如果想實作粘貼網頁時，直接将其中的圖檔上傳到自己的圖檔伺服器，該怎麼做呢？這其中主要用到的js是plugins/catchremoteimage.js。
首先設定編輯器選項：catchRemoteImageEnable：true。這樣便開啟了自動抓取圖檔的功能。
如果想自定義圖檔上傳方式，而不用ueditor預設的圖檔上傳位址，那麼需要修改catchremoteimage.js這裡：
把這裡的url改成自定義的ashx檔案位址即可。
上傳圖檔視窗操作需要先選擇圖檔，點選“開始上傳”，然後插入圖檔。操作過程略顯繁瑣，其實可以去掉“開始上傳”，在選中圖檔後自動上傳。
首先找到dialogs/image/image.html,隐藏image.html的“開始上傳”按鈕。
然後修改dialogs/image/image.js檔案，找到addFile方法，然後在方法結尾添加以下代碼：
function addFile(file) { …… //自動上傳 clickUpload = function () { $upload.click(); } setTimeout("clickUpload()", 200); }
代碼示例：https://github.com/cathychen00/ueditor1
如何聯系我：【萬裡虎】www.bravetiger.cn
【QQ】3396726884 （咨詢問題100元起，幫助解決問題500元起）
【部落格】http://www.cnblogs.com/kenshinobiy/