UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器,具備輕量,可定製,注重用戶體驗等特色,開源基於MIT協議,容許自由使用和修改代碼。javascript
UEditor富文本編輯器,輕量,可定製,注重用戶體驗。css
到官網下載 UEditor 最新版:[官網地址]html
或是直接在網盤下載:JSP- UTF-8版本。(本文用的環境)前端
解壓下載的包,在解壓後的目錄建立 demo.html 文件,填入下面的html代碼java
(最小配置的代碼)node
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 加載編輯器的容器 --> <script id="container" name="content" type="text/plain"></script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 編輯器源碼文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 實例化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('container'); </script> </body> </html>
若是看到了下面這樣的編輯器,恭喜你,初次部署成功!web
1.編輯器在初始化的時候能夠傳入給編輯器:api
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
歡迎使用百度編輯器!
</script>
刷新頁面以下:瀏覽器
2.配置項也能夠經過 ueditor.config.js 文件修改服務器
<!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script>
ueditor.config.js 具體內容詳情:
/** * ueditor完整配置項 * 能夠在這裏配置整個編輯器的特性 */ /**************************提示******************************** * 全部被註釋的配置項均爲UEditor默認值。 * 修改默認配置請首先確保已經徹底明確該參數的真實用途。 * 主要有兩種修改方案,一種是取消此處註釋,而後修改爲對應參數;另外一種是在實例化編輯器時傳入對應參數。 * 當升級編輯器時,可直接使用舊版配置文件替換新版配置文件,不用擔憂舊版配置文件中因缺乏新功能所需的參數而致使腳本報錯。 **************************提示********************************/ (function () { /** * 編輯器資源文件根路徑。它所表示的含義是:以編輯器實例化頁面爲當前路徑,指向編輯器資源文件(即dialog等文件夾)的路徑。 * 鑑於不少同窗在使用編輯器的時候出現的種種路徑問題,此處強烈建議你們使用"相對於網站根目錄的相對路徑"進行配置。 * "相對於網站根目錄的相對路徑"也就是以斜槓開頭的形如"/myProject/ueditor/"這樣的路徑。 * 若是站點中有多個不在同一層級的頁面須要實例化編輯器,且引用了同一UEditor的時候,此處的URL可能不適用於每一個頁面的編輯器。 * 所以,UEditor提供了針對不一樣頁面的編輯器可單獨配置的根路徑,具體來講,在須要實例化編輯器的頁面最頂部寫上以下代碼便可。固然,須要令此處的URL等於對應的配置。 * window.UEDITOR_HOME_URL = "/xxxx/xxxx/"; */ var URL = window.UEDITOR_HOME_URL || getUEBasePath(); /** * 配置項主體。注意,此處全部涉及到路徑的配置別遺漏URL變量。 */ window.UEDITOR_CONFIG = { //爲編輯器實例添加一個路徑,這個不能被註釋 UEDITOR_HOME_URL: URL // 服務器統一請求接口路徑 , serverUrl: URL + "jsp/controller.jsp" //工具欄上的全部的功能按鈕和下拉框,能夠在new編輯器的實例時選擇本身須要的重新定義 , toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'help', 'drafts' ]] //當鼠標放在工具欄上時顯示的tooltip提示,留空支持自動多語言配置,不然以配置值爲準 // ,labelMap:{ // 'anchor':'', 'undo':'' // } //語言配置項,默認是zh-cn。有須要的話也可使用以下這樣的方式來自動多語言切換,固然,前提條件是lang文件夾下存在對應的語言文件: //lang值也能夠經過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase() //,lang:"zh-cn" //,langPath:URL +"lang/" //主題配置項,默認是default。有須要的話也可使用以下這樣的方式來自動多主題切換,固然,前提條件是themes文件夾下存在對應的主題文件: //現有以下皮膚:default //,theme:'default' //,themePath:URL +"themes/" //,zIndex : 900 //編輯器層級的基數,默認是900 //針對getAllHtml方法,會在對應的head標籤中增長該編碼設置。 //,charset:"utf-8" //若實例化編輯器的頁面手動修改的domain,此處須要設置爲true //,customDomain:false //經常使用配置項目 //,isShow : true //默認顯示編輯器 //,textarea:'editorValue' // 提交表單時,服務器獲取編輯器提交內容的所用的參數,多實例時能夠給容器name屬性,會將name給定的值最爲每一個實例的鍵值,不用每次實例化的時候都設置這個值 //,initialContent:'歡迎使用ueditor!' //初始化編輯器的內容,也能夠經過textarea/script給值,看官網例子 //,autoClearinitialContent:true //是否自動清除編輯器初始內容,注意:若是focus屬性設置爲true,這個也爲真,那麼編輯器一上來就會觸發致使初始化的內容看不到了 //,focus:false //初始化時,是否讓編輯器得到焦點true或false //若是自定義,最好給p標籤以下的行高,要不輸入中文時,會有跳動感 //,initialStyle:'p{line-height:1em}'//編輯器層級的基數,能夠用來改變字體等 //,iframeCssUrl: URL + '/themes/iframe.css' //給編輯器內部引入一個css文件 //indentValue //首行縮進距離,默認是2em //,indentValue:'2em' //,initialFrameWidth:1000 //初始化編輯器寬度,默認1000 //,initialFrameHeight:320 //初始化編輯器高度,默認320 //,readonly : false //編輯器初始化結束後,編輯區域是不是隻讀的,默認是false //,autoClearEmptyNode : true //getContent時,是否刪除空的inlineElement節點(包括嵌套的狀況) //啓用自動保存 //,enableAutoSave: true //自動保存間隔時間, 單位ms //,saveInterval: 500 //,fullscreen : false //是否開啓初始化時即全屏,默認關閉 //,imagePopup:true //圖片操做的浮層開關,默認打開 //,autoSyncData:true //自動同步編輯器要提交的數據 //,emotionLocalization:false //是否開啓表情本地化,默認關閉。若要開啓請確保emotion文件夾下包含官網提供的images表情文件夾 //粘貼只保留標籤,去除標籤全部屬性 //,retainOnlyLabelPasted: false //,pasteplain:false //是否默認爲純文本粘貼。false爲不使用純文本粘貼,true爲使用純文本粘貼 //純文本粘貼模式下的過濾規則 //'filterTxtRules' : function(){ // function transP(node){ // node.tagName = 'p'; // node.setStyle(); // } // return { // //直接刪除及其字節點內容 // '-' : 'script style object iframe embed input select', // 'p': {$:{}}, // 'br':{$:{}}, // 'div':{'$':{}}, // 'li':{'$':{}}, // 'caption':transP, // 'th':transP, // 'tr':transP, // 'h1':transP,'h2':transP,'h3':transP,'h4':transP,'h5':transP,'h6':transP, // 'td':function(node){ // //沒有內容的td直接刪掉 // var txt = !!node.innerText(); // if(txt){ // node.parentNode.insertAfter(UE.uNode.createText(' '),node); // } // node.parentNode.removeChild(node,node.innerText()) // } // } //}() //,allHtmlEnabled:false //提交到後臺的數據是否包含整個html字符串 //insertorderedlist //有序列表的下拉配置,值留空時支持多語言自動識別,若配置值,則以此值爲準 //,'insertorderedlist':{ // //自定的樣式 // 'num':'1,2,3...', // 'num1':'1),2),3)...', // 'num2':'(1),(2),(3)...', // 'cn':'一,二,三....', // 'cn1':'一),二),三)....', // 'cn2':'(一),(二),(三)....', // //系統自帶 // 'decimal' : '' , //'1,2,3...' // 'lower-alpha' : '' , // 'a,b,c...' // 'lower-roman' : '' , //'i,ii,iii...' // 'upper-alpha' : '' , lang //'A,B,C' // 'upper-roman' : '' //'I,II,III...' //} //insertunorderedlist //無序列表的下拉配置,值留空時支持多語言自動識別,若配置值,則以此值爲準 //,insertunorderedlist : { //自定的樣式 // 'dash' :'— 破折號', //-破折號 // 'dot':' 。 小圓圈', //系統自帶 // 'circle' : '', // '○ 小圓圈' // 'disc' : '', // '● 小圓點' // 'square' : '' //'■ 小方塊' //} //,listDefaultPaddingLeft : '30'//默認的左邊縮進的基數倍 //,listiconpath : 'http://bs.baidu.com/listicon/'//自定義標號的路徑 //,maxListLevel : 3 //限制能夠tab的級數, 設置-1爲不限制 //,autoTransWordToList:false //禁止word中粘貼進來的列表自動變成列表標籤 //fontfamily //字體設置 label留空支持多語言自動切換,若配置,則以配置值爲準 //,'fontfamily':[ // { label:'',name:'songti',val:'宋體,SimSun'}, // { label:'',name:'kaiti',val:'楷體,楷體_GB2312, SimKai'}, // { label:'',name:'yahei',val:'微軟雅黑,Microsoft YaHei'}, // { label:'',name:'heiti',val:'黑體, SimHei'}, // { label:'',name:'lishu',val:'隸書, SimLi'}, // { label:'',name:'andaleMono',val:'andale mono'}, // { label:'',name:'arial',val:'arial, helvetica,sans-serif'}, // { label:'',name:'arialBlack',val:'arial black,avant garde'}, // { label:'',name:'comicSansMs',val:'comic sans ms'}, // { label:'',name:'impact',val:'impact,chicago'}, // { label:'',name:'timesNewRoman',val:'times new roman'} //] //fontsize //字號 //,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36] //paragraph //段落格式 值留空時支持多語言自動識別,若配置,則以配置值爲準 //,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''} //rowspacingtop //段間距 值和顯示的名字相同 //,'rowspacingtop':['5', '10', '15', '20', '25'] //rowspacingBottom //段間距 值和顯示的名字相同 //,'rowspacingbottom':['5', '10', '15', '20', '25'] //lineheight //行內間距 值和顯示的名字相同 //,'lineheight':['1', '1.5','1.75','2', '3', '4', '5'] //customstyle //自定義樣式,不支持國際化,此處配置值便可最後顯示值 //block的元素是依據設置段落的邏輯設置的,inline的元素依據BIU的邏輯設置 //儘可能使用一些經常使用的標籤 //參數說明 //tag 使用的標籤名字 //label 顯示的名字也是用來標識不一樣類型的標識符,注意這個值每一個要不一樣, //style 添加的樣式 //每個對象就是一個自定義的樣式 //,'customstyle':[ // {tag:'h1', name:'tc', label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'}, // {tag:'h1', name:'tl',label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'}, // {tag:'span',name:'im', label:'', style:'font-style:italic;font-weight:bold'}, // {tag:'span',name:'hi', label:'', style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'} //] //打開右鍵菜單功能 //,enableContextMenu: true //右鍵菜單的內容,能夠參考plugins/contextmenu.js裏邊的默認菜單的例子,label留空支持國際化,不然以此配置爲準 //,contextMenu:[ // { // label:'', //顯示的名稱 // cmdName:'selectall',//執行的command命令,當點擊這個右鍵菜單時 // //exec可選,有了exec就會在點擊時執行這個function,優先級高於cmdName // exec:function () { // //this是當前編輯器的實例 // //this.ui._dialogs['inserttableDialog'].open(); // } // } //] //快捷菜單 //,shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"] //elementPathEnabled //是否啓用元素路徑,默認是顯示 //,elementPathEnabled : true //wordCount //,wordCount:true //是否開啓字數統計 //,maximumWords:10000 //容許的最大字符數 //字數統計提示,{#count}表明當前字數,{#leave}表明還能夠輸入多少字符數,留空支持多語言自動切換,不然按此配置顯示 //,wordCountMsg:'' //當前已輸入 {#count} 個字符,您還能夠輸入{#leave} 個字符 //超出字數限制提示 留空支持多語言自動切換,不然按此配置顯示 //,wordOverFlowMsg:'' //<span style="color:red;">你輸入的字符個數已經超出最大容許值,服務器可能會拒絕保存!</span> //tab //點擊tab鍵時移動的距離,tabSize倍數,tabNode什麼字符作爲單位 //,tabSize:4 //,tabNode:' ' //removeFormat //清除格式時能夠刪除的標籤和屬性 //removeForamtTags標籤 //,removeFormatTags:'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var' //removeFormatAttributes屬性 //,removeFormatAttributes:'class,style,lang,width,height,align,hspace,valign' //undo //能夠最多回退的次數,默認20 //,maxUndoCount:20 //當輸入的字符數超過該值時,保存一次現場 //,maxInputCount:1 //autoHeightEnabled // 是否自動長高,默認true //,autoHeightEnabled:true //scaleEnabled //是否能夠拉伸長高,默認true(當開啓時,自動長高失效) //,scaleEnabled:false //,minFrameWidth:800 //編輯器拖動時最小寬度,默認800 //,minFrameHeight:220 //編輯器拖動時最小高度,默認220 //autoFloatEnabled //是否保持toolbar的位置不動,默認true //,autoFloatEnabled:true //浮動時工具欄距離瀏覽器頂部的高度,用於某些具備固定頭部的頁面 //,topOffset:30 //編輯器底部距離工具欄高度(若是參數大於等於編輯器高度,則設置無效) //,toolbarTopOffset:400 //pageBreakTag //分頁標識符,默認是_ueditor_page_break_tag_ //,pageBreakTag:'_ueditor_page_break_tag_' //autotypeset //自動排版參數 //,autotypeset: { // mergeEmptyline: true, //合併空行 // removeClass: true, //去掉冗餘的class // removeEmptyline: false, //去掉空行 // textAlign:"left", //段落的排版方式,能夠是 left,right,center,justify 去掉這個屬性表示不執行排版 // imageBlockLine: 'center', //圖片的浮動方式,獨佔一行劇中,左右浮動,默認: center,left,right,none 去掉這個屬性表示不執行排版 // pasteFilter: false, //根據規則過濾沒事粘貼進來的內容 // clearFontSize: false, //去掉全部的內嵌字號,使用編輯器默認的字號 // clearFontFamily: false, //去掉全部的內嵌字體,使用編輯器默認的字體 // removeEmptyNode: false, // 去掉空節點 // //能夠去掉的標籤 // removeTagNames: {標籤名字:1}, // indent: false, // 行首縮進 // indentValue : '2em', //行首縮進的大小 // bdc2sb: false, // tobdc: false //} //tableDragable //表格是否能夠拖拽 //,tableDragable: true //,disabledTableInTable:true //禁止表格嵌套 //sourceEditor //源碼的查看方式,codemirror 是代碼高亮,textarea是文本框,默認是codemirror //注意默認codemirror只能在ie8+和非ie中使用 //,sourceEditor:"codemirror" //若是sourceEditor是codemirror,還用配置一下兩個參數 //codeMirrorJsUrl js加載的路徑,默認是 URL + "third-party/codemirror/codemirror.js" //,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js" //codeMirrorCssUrl css加載的路徑,默認是 URL + "third-party/codemirror/codemirror.css" //,codeMirrorCssUrl:URL + "third-party/codemirror/codemirror.css" //編輯器初始化完成後是否進入源碼模式,默認爲否。 //,sourceEditorFirst:false //iframeUrlMap //dialog內容的路徑 ~會被替換成URL,垓屬性一旦打開,將覆蓋全部的dialog的默認路徑 //,iframeUrlMap:{ // 'anchor':'~/dialogs/anchor/anchor.html', //} //webAppKey 百度應用的APIkey,每一個站長必須首先去百度官網註冊一個key後方能正常使用app功能,註冊介紹,http://app.baidu.com/static/cms/getapikey.html //, webAppKey: "" }; function getUEBasePath(docUrl, confUrl) { return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath()); } function getConfigFilePath() { var configPath = document.getElementsByTagName('script'); return configPath[ configPath.length - 1 ].src; } function getBasePath(docUrl, confUrl) { var basePath = confUrl; if (/^(\/|\\\\)/.test(confUrl)) { basePath = /^.+?\w(\/|\\\\)/.exec(docUrl)[0] + confUrl.replace(/^(\/|\\\\)/, ''); } else if (!/^[a-z]+:/i.test(confUrl)) { docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\\\/]+$/, ''); basePath = docUrl + "" + confUrl; } return optimizationPath(basePath); } function optimizationPath(path) { var protocol = /^[a-z]+:\/\//.exec(path)[ 0 ], tmp = null, res = []; path = path.replace(protocol, "").split("?")[0].split("#")[0]; path = path.replace(/\\/g, '/').split(/\//); path[ path.length - 1 ] = ""; while (path.length) { if (( tmp = path.shift() ) === "..") { res.pop(); } else if (tmp !== ".") { res.push(tmp); } } return protocol + res.join("/"); } window.UE = { getUEBasePath: getUEBasePath }; })();
3. 經過釋放註釋來觀看效果。
(1)修改語言
//語言配置項,默認是zh-cn。有須要的話也可使用以下這樣的方式來自動多語言切換,固然,前提條件是lang文件夾下存在對應的語言文件: //lang值也能夠經過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase() //,lang:"zh-cn" //,lang:"en" //,langPath:URL +"lang/"
由於編輯器默認使用的語言是中文,那咱們能夠嘗試改一下爲英文。
//語言配置項,默認是zh-cn。有須要的話也可使用以下這樣的方式來自動多語言切換,固然,前提條件是lang文件夾下存在對應的語言文件: //lang值也能夠經過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase() //,lang:"zh-cn" ,lang:"en" //,langPath:URL +"lang/"
觀察效果以下:
(2)修改編輯框的大小
釋放如下的代碼
//,initialFrameWidth:1000 //初始化編輯器寬度,默認1000 //,initialFrameHeight:320 //初始化編輯器高度,默認320
效果以下:
(3) 修改編輯器上面的工具。
修改配置項的方法:
1. 方法一:修改 ueditor.config.js 裏面的 toolbars
2. 方法二:實例化編輯器的時候傳入 toolbars 參數
這裏我直接在ueditor.config.js裏面替換了。
簡單的列表
toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold'] ]
效果以下:
多行列表:
toolbars: [ ['fullscreen', 'source', 'undo', 'redo'], ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc'] ]
效果以下:
完整列表
toolbars: [ [ 'anchor', //錨點 'undo', //撤銷 'redo', //重作 'bold', //加粗 'indent', //首行縮進 'snapscreen', //截圖 'italic', //斜體 'underline', //下劃線 'strikethrough', //刪除線 'subscript', //下標 'fontborder', //字符邊框 'superscript', //上標 'formatmatch', //格式刷 'source', //源代碼 'blockquote', //引用 'pasteplain', //純文本粘貼模式 'selectall', //全選 'print', //打印 'preview', //預覽 'horizontal', //分隔線 'removeformat', //清除格式 'time', //時間 'date', //日期 'unlink', //取消連接 'insertrow', //前插入行 'insertcol', //前插入列 'mergeright', //右合併單元格 'mergedown', //下合併單元格 'deleterow', //刪除行 'deletecol', //刪除列 'splittorows', //拆分紅行 'splittocols', //拆分紅列 'splittocells', //徹底拆分單元格 'deletecaption', //刪除表格標題 'inserttitle', //插入標題 'mergecells', //合併多個單元格 'deletetable', //刪除表格 'cleardoc', //清空文檔 'insertparagraphbeforetable', //"表格前插入行" 'insertcode', //代碼語言 'fontfamily', //字體 'fontsize', //字號 'paragraph', //段落格式 'simpleupload', //單圖上傳 'insertimage', //多圖上傳 'edittable', //表格屬性 'edittd', //單元格屬性 'link', //超連接 'emotion', //表情 'spechars', //特殊字符 'searchreplace', //查詢替換 'map', //Baidu地圖 'gmap', //Google地圖 'insertvideo', //視頻 'help', //幫助 'justifyleft', //居左對齊 'justifyright', //居右對齊 'justifycenter', //居中對齊 'justifyjustify', //兩端對齊 'forecolor', //字體顏色 'backcolor', //背景色 'insertorderedlist', //有序列表 'insertunorderedlist', //無序列表 'fullscreen', //全屏 'directionalityltr', //從左向右輸入 'directionalityrtl', //從右向左輸入 'rowspacingtop', //段前距 'rowspacingbottom', //段後距 'pagebreak', //分頁 'insertframe', //插入Iframe 'imagenone', //默認 'imageleft', //左浮動 'imageright', //右浮動 'attachment', //附件 'imagecenter', //居中 'wordimage', //圖片轉存 'lineheight', //行間距 'edittip ', //編輯提示 'customstyle', //自定義標題 'autotypeset', //自動排版 'webapp', //百度應用 'touppercase', //字母大寫 'tolowercase', //字母小寫 'background', //背景 'template', //模板 'scrawl', //塗鴉 'music', //音樂 'inserttable', //插入表格 'drafts', // 從草稿箱加載 'charts', // 圖表 ] ]
效果以下:
(4)其餘的配置以此類推。