引言
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量,可定制,注重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼...
官網:http://ueditor.baidu.com/website/
在線定制:http://ueditor.baidu.com/website/download.html#ubuilder
Asp.Net和Ueditor
在項目中的應用,除非你知道,你需要的富文本框需要哪些功能,你才有可以在線定制,然后下載,但是多數情況下,對需求還是不肯定的,這種情況下,就需要將所有的功能都下載下來,然后根據實際需求,修改配置文件,添加或者移除功能。
在官網中你可以下載:

完整的demo如下:

在應用的時候需要引入:

其中ueditor.config.js就是ueditor的配置文件。找到toolbars(為了方便這里,將toobars重新排版了),這里加了注釋,你可以根據需要,將不需要的功能注釋,就可以定制你需要的富文本編輯器了。這里lz已添加注釋,助於理解。
1 , toolbars: [ 2 [ 3 'fullscreen'//全屏 4 , 'source'//html源代碼 5 , '|' 6 , 'undo'//撤銷 7 , 'redo'//重做 8 , '|' 9 , 'bold'//加粗 10 , 'italic'//斜體 11 , 'underline'//下划線 12 , 'fontborder'//字符邊框 13 , 'strikethrough'//刪除線 14 , 'superscript'//上標 15 , 'subscript'//下標 16 , 'removeformat'//清楚格式 17 , 'formatmatch'//格式刷 18 , 'autotypeset'//自動排版 19 , 'blockquote'//引用 20 , 'pasteplain'//純文本粘貼模式 21 , '|' 22 , 'forecolor'//字體顏色 23 , 'backcolor'//背景色 24 , 'insertorderedlist'//有序列表 25 , 'insertunorderedlist'//無序列表 26 , 'selectall'//全選 27 , 'cleardoc'//清空文檔 28 , '|' 29 , 'rowspacingtop'//段前距 30 , 'rowspacingbottom'//段后距 31 , 'lineheight'//行間距 32 , '|' 33 , 'customstyle'//自定義標題 34 , 'paragraph'//段落 35 , 'fontfamily'//字體 36 , 'fontsize'//字號 37 , '|' 38 , 'directionalityltr'//從左向右輸入 39 , 'directionalityrtl'//從右向左輸入 40 , 'indent'//首行縮進 41 , '|' 42 , 'justifyleft'//居左對齊 43 , 'justifycenter'//居中對齊 44 , 'justifyright'//居右對齊 45 , 'justifyjustify'//兩端對齊 46 , '|' 47 , 'touppercase'//字母大寫 48 , 'tolowercase'//字母小寫 49 , '|' 50 , 'link'//超鏈接 51 , 'unlink'//取消鏈接 52 , 'anchor'//錨點 53 , '|' 54 , 'imagenone'//默認 55 , 'imageleft'//左浮動 56 , 'imageright'//右浮動 57 , 'imagecenter'//居中 58 , '|' 59 , 'insertimage'//圖片 60 , 'emotion'//表情 61 , 'scrawl'//塗鴉 62 , 'insertvideo'//視頻 63 , 'music'//音樂 64 , 'attachment'//附件 65 , 'map'//百度地圖 66 , 'gmap'//google地圖 67 , 'insertframe'//插入Iframe 68 , 'insertcode'//代碼語言 69 , 'webapp'//百度應用 70 , 'pagebreak'//分頁 71 , 'template'//模版 72 , 'background'//背景 73 , '|' 74 , 'horizontal'//分割線 75 , 'date'//日期 76 , 'time'//時間 77 , 'spechars'//特殊字符 78 , 'snapscreen'//截圖 79 , 'wordimage'//圖片轉存 80 , '|' 81 , 'inserttable'//插入表格 82 , 'deletetable'//刪除表格 83 , 'insertparagraphbeforetable'//表格前插入行 84 , 'insertrow'//前插入行 85 , 'deleterow'//刪除行 86 , 'insertcol'//前插入列 87 , 'deletecol'//刪除列 88 , 'mergecells'//合並多個單元格 89 , 'mergeright'//右合並單元格 90 , 'mergedown'//下合並單元格 91 , 'splittocells'//完全拆分單元格 92 , 'splittorows'//拆分成行 93 , 'splittocols'//拆分成列 94 , 'charts'//圖表 95 , '|' 96 , 'print'//打印 97 , 'preview'//預覽 98 , 'searchreplace'//查找與替換 99 , 'help'//幫助 100 , 'drafts'//草稿箱 101 ] 102 ]
里面的內容,也很好理解,順序,也是按照ueditor上面按鈕的現實順序排列的。測試,將后面幾行注釋。
結果

這樣,你就可以定制自己希望的功能了。
總結
項目中,有用到,雖然很簡單,還是硬着頭皮總結了一下,以后會總結一下ueditor在項目中的具體應用。如果您使用過,不妨留個腳印,或者加入樓主的qq群,一起學習,ueditor的使用,個人認為,最頭疼的莫過於路徑的配置了。
