Ueditor的兩種定制方式


引言

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的使用,個人認為,最頭疼的莫過於路徑的配置了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM