富文本編輯器UEditor自定義工具欄(一核畴、基礎(chǔ)配置與字體、背景色帮哈、行間距膛檀、超鏈接實現(xiàn))

導(dǎo)讀:UEditor 是由百度「FEX前端研發(fā)團隊」開發(fā)的所見即所得富文本web編輯器,功能強大,可定制咖刃,是一款優(yōu)秀的國產(chǎn)在線富文本編輯器泳炉,編輯器內(nèi)可插入圖片、音頻嚎杨、視頻等花鹅。

一、UEditor自定義工具欄效果圖如下:

UEditor自定義工具欄枫浙,不影響其他項目引用

二刨肃、UEditor富文本編輯器環(huán)境搭建及項目引用

環(huán)境搭建不再贅述,請自行查閱或者參考以下鏈接

1.UEditor官網(wǎng):http://ueditor.baidu.com/website/

2.UEditor官網(wǎng)演示:http://ueditor.baidu.com/website/onlinedemo.html

3.UEditor官網(wǎng)入門部署和體驗:http://fex.baidu.com/ueditor/

4.UEditor添加一個普通按鈕:http://blog.csdn.net/hougelou/article/details/40117881

三箩帚、UEditor自定義工具欄-常規(guī)按鈕

1.思路

隱藏掉UEditor自帶工具欄真友,使用自定義的工具欄,在功能按鈕上添加(調(diào)用)對應(yīng)的UEditor相關(guān)命令

2.實例化編輯器

<div class="editBox">
<textarea id="editor" type="text/plain"></textarea>
</div>
<script type="text/javascript">
     var ue = UE.getEditor('editor', {
         autoHeightEnabled: true
         ,initialFrameWidth: '100%'  //初始化編輯器寬度,默認1000
         ,minFrameWidth: '760'    //編輯器拖動時最小寬度,默認800
         ,initialFrameHeight: 450 //初始化高度
         ,minFrameHeight:630 
         ,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', 'drafts', 'help'
             ]
         ]
         ,initialContent: "<p>請在這里輸入正文...</p><p><br/></p><p><br/></p><p><br/></p><p><br/></p><p><br/></p><p><br/></p><p><br/></p>_ueditor_page_break_tag_<p><br/></p>"http://默認內(nèi)容
         ,elementPathEnabled: false//元素路徑
         ,wordCount: false//字數(shù)統(tǒng)計
         ,enableAutoSave: false //自動保存
         ,autoSyncData: false//自動同步編輯器要提交的數(shù)據(jù)
         ,autoFloatEnabled:false//工具欄懸浮
         ,enableContextMenu:false //右鍵菜單
         ,lineheight:['1', '1.5','1.75','2', '3', '4', '5']//行高
         ,pasteplain:true //是否默認為純文本粘貼
         ,catchRemoteImageEnable:false//遠程圖片抓取關(guān)閉
         ,imagePopup:false//圖片操作的浮層開關(guān)紧帕,默認打開
 
     })

JS實例化編輯器

說明:編輯器有很多可自定義的參數(shù)項盔然,在實例化的時候可以傳入給編輯器,這樣不必改動源碼是嗜,不影響其他地方的調(diào)用(此處實例化為滿足個性化需求愈案,所傳參數(shù)較多);

(1)JS實例化編輯器時toolbars參數(shù)配置鹅搪,本示例中配置了所有功能按鈕(可按需配置)站绪;

(2)不配置toolbars參數(shù),則在自定義功能按鈕上調(diào)用相關(guān)命令時丽柿,報異常恢准,操作會無效,因此圖省事航厚,配置了所有按鈕顷歌;

(3)本示例中使用的是1.4.3的.Net版本

3.隱藏工具欄的方法

(1)若是所有項目或整個網(wǎng)站都使用同一種樣式的編輯器锰蓬,可以考慮通過改動源碼幔睬,隱藏工具欄;

按此路徑“ueditor\themes\default\css”打開ueditor.css文件芹扭,搜索或在行號大約148行的 “.edui-default .edui-editor-toolbarbox處添加display:none“麻顶;

image.png

注:此種方法在頁面加載時,UEditor自帶工具欄不會出現(xiàn)閃現(xiàn)消失的情況舱卡;

(2)通過前臺JS配置及JS腳本控制工具欄的隱藏辅肾,避免對其他地方引用UEditor造成影響;

 //ue為實例化出來的UEditor變量
ue.addListener("ready",function(ue) {
     //編輯器準備就緒后會觸發(fā)該事件
     $(".edui-default .edui-editor-toolbarbox").css("display","none");
})
 ue.addListener("langReady",function () {
     //語言加載完成會觸發(fā)該事件
     $(".edui-default .edui-editor-toolbarbox").css("display","none");
})

JS隱藏UEditor工具欄

<a href="javascript:void(0);" class="left textSet bold" title='加粗' onclick="ue.execCommand('bold')"><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon4.png")" width="11" height="17" /></a>

Html部分以字體加粗為例調(diào)用UEditor命令

注:其中ue為UEditor實例化后的全局變量轮锥,與方法(1)比較矫钓,此種方法在頁面加載時,UEditor自帶工具欄有可能會出現(xiàn)短暫閃現(xiàn)又消失的情況,不過影響不大新娜,可忽略赵辕;

附加一些其他命令(其他命令詳見 UEditor官網(wǎng)命令列表 :http://ueditor.baidu.com/doc/#COMMAND.LIST):

  • 斜體   ue.execCommand('italic');
  • 下劃線  ue.execCommand('underline')概龄;
  • 居中對齊 ue.execCommand('justify','center')还惠;
  • 首行縮進 ue.execCommand('indent');

四私杜、UEditor自定義工具欄-非常規(guī)按鈕

加粗蚕键、斜體、下劃線衰粹、居中對齊锣光、首行縮進等功能按鈕可直接調(diào)用UEditor對應(yīng)相關(guān)命令,但涉及懸浮窗铝耻、彈層的功能按鈕則需要特殊處理嫉晶。

(1)字體顏色

自定義工具欄-字體顏色效果圖

工具欄字體顏色功能按鈕源碼

工具欄字體顏色功能按鈕源碼

  • 查看字體顏色對應(yīng)的Html源碼,對應(yīng)id為“eudi24“,點擊事件為 $EDITORUI["edui24"]._onButtonClick(event, this)田篇;
  • 在自定義工具欄所在頁面查看字體顏色功能按鈕對應(yīng)id替废,實例化時參數(shù)配置不同,功能按鈕對應(yīng)id可能會變化泊柬;
  • 假設(shè)自定義工具欄所在頁面字體顏色功能按鈕對應(yīng)id為“eudi24“椎镣,實現(xiàn)調(diào)用命令如下:
<a href="javascript:void(0);" id="edui24" class="left textSet color" title='字體顏色' onclick="$EDITORUI['edui24']._onArrowClick(); ">
    <img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon7.png")" width="15" height="17" />
</a>

自定義工具欄-字體顏色調(diào)用命令

注:功能按鈕必須要有id屬性,字體顏色懸浮窗會根據(jù)id來定位懸浮窗位置兽赁,沒有id状答,字體顏色懸浮窗位置會不正確;

(2)背景色

原理同字體顏色

<a href="javascript:void(0);" id="edui27" class="left textSet bgcolor" title='背景色'  onclick="ue.focus();$EDITORUI['edui27']._onArrowClick(); ">
    <img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon8.png")" width="19" height="17" />
</a>

自定義工具欄-背景色調(diào)用命令

(3)字體刀崖、字號

自定義工具欄-字體效果圖
<div class="fontFamily select left" id="edui92" title="字體" onclick="$EDITORUI['edui92']._onArrowClick();">
    <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">宋體</p>
</div>
<div class="fontSize select left" id="edui105" title="字號" onclick="$EDITORUI['edui105']._onArrowClick();">
    <p>16px</p>
</div>

自定義工具欄-字體惊科、字號調(diào)用命令
本示例中,通過調(diào)用了字體亮钦、字號相關(guān)命令來實現(xiàn)馆截,也可以通過切圖人員給的相關(guān)腳本來實現(xiàn)。

此外還需要處理的情況:

  • 選擇字體蜂莉、字號后蜡娶,字體、字號功能按鈕顯示的字體映穗、字號相應(yīng)變化窖张;
ue.addListener("ready",function(ue) {
    //edui93_content元素為動態(tài)生成,因此需要使用以下方法綁定事件
    $("#edui_fixedlayer").on("click","#edui93_content .edui-label.edui-listitem-label.edui-default",function () {
        $("#edui92").find("p").html($(this).html().trim("'"));//字體
    });
    $("#edui_fixedlayer").on("click","#edui106_content .edui-label.edui-listitem-label.edui-default",function () {
        $("#edui105").find("p").html($(this).html().trim("'"));//字號
    });
})

選擇字體蚁滋、字號時宿接,字體赘淮、字號相應(yīng)變化

  • 編輯器內(nèi)文字部分獲得焦點后,字體睦霎,字號應(yīng)該為焦點處文字的字體拥知、字號;
ue.addListener("selectionchange",function () {
    //字體碎赢、字號變化
    $("#edui92").find("p").html(this.queryCommandValue('fontfamily').split(",")[0]);//字體
    $("#edui105").find("p").html(this.queryCommandValue('fontsize').split(",")[0]);//字號     
})

編輯器內(nèi)文字獲得焦點低剔,字體字號處理

(4)行間距

自定義工具欄-行間距效果圖
<div class="left lineHeight" id="edui67" title="行間距" onclick="$EDITORUI['edui67']._onArrowClick(); ">
    <p><img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon14.png")" width="18" height="17" /></p>
</div>

自定義工具欄-行間距調(diào)用命令
UEditor實例化時(見 “三、UEditor自定義工具欄-常規(guī)按鈕 JS實例化編輯器“”)可根據(jù)需求配置所需要的行間距肮塞,也可以不配置行間距襟齿,使用UEditor默認配置;’

//,lineheight:['1', '1.5','1.75','2', '3', '4', '5']

鑒于1倍行間距文字較密集枕赵,產(chǎn)品經(jīng)理要求行間距默認為1.5猜欺,實現(xiàn)的方式是改動源碼:

按此路徑“ueditor\ueditor.all.js“打開ueditor.all.js文件約6906行,添加“l(fā)ine-height:1.5em“,同理也可更改其他默認樣式拷窜;

自定義工具欄-行間距默認1.5源碼修改

注:默認1.5行間距开皿,則在編輯器初始化完之后,行間距應(yīng)該默認勾選1.5篮昧,處理方法如下:

ue.addListener("ready",function(ue) {
    //行間距默認勾選1.5
    var myUeditor=this;
    $("#edui67").on("click",function () {
    setTimeout(function(){ $("#edui68_body").css("margin-top","1px")},1);
        if ($("#edui68_body .edui-state-checked").size()<=0 ) {
            $("#edui70").addClass("edui-state-checked");
            myUeditor.execCommand('lineheight','1.5');
        }
    })
})

自定義工具欄-默認勾選1.5行間距

(5)超鏈接

自定義工具欄-超鏈接效果圖
<a href="javascript:void(0);" class="left media link" id="edui135" onclick="return $EDITORUI['edui135']._onClick(event, this);" title="插入鏈接">
    <img src="@Html.SourceImageUrl("/images/personalHomepage/toolsbar-icon15.png")" width="15" height="17" />
</a>  

自定義工具欄-超鏈接調(diào)用命令

結(jié)語

本篇主要介紹富文本編輯器1.4.3版本自定義工具欄實現(xiàn)方法赋荆,探討的功能按鈕有加粗、斜體懊昨、居中對齊(居左對齊窄潭、居右對齊)、首行縮進常規(guī)按鈕酵颁,字體嫉你、字號、行間距涉及懸浮窗按鈕及超鏈接涉及彈層按鈕功能實現(xiàn)及一些細節(jié)處理躏惋;不足或錯誤之處幽污,歡迎探討與斧正。下一篇將介紹自定義工具欄插入圖片簿姨、音頻距误、視頻涉及彈層的個性化功能按鈕實現(xiàn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末款熬,一起剝皮案震驚了整個濱河市深寥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贤牛,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件则酝,死亡現(xiàn)場離奇詭異殉簸,居然都是意外死亡闰集,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門般卑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來武鲁,“玉大人,你說我怎么就攤上這事蝠检°迨螅” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵叹谁,是天一觀的道長饲梭。 經(jīng)常有香客問我,道長焰檩,這世上最難降的妖魔是什么憔涉? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮析苫,結(jié)果婚禮上兜叨,老公的妹妹穿的比我還像新娘。我一直安慰自己衩侥,他們只是感情好国旷,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著茫死,像睡著了一般议街。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上璧榄,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天特漩,我揣著相機與錄音,去河邊找鬼骨杂。 笑死涂身,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的搓蚪。 我是一名探鬼主播蛤售,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼妒潭!你這毒婦竟也來了悴能?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤雳灾,失蹤者是張志新(化名)和其女友劉穎漠酿,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谎亩,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡炒嘲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年宇姚,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夫凸。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡浑劳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出夭拌,到底是詐尸還是另有隱情魔熏,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布鸽扁,位于F島的核電站蒜绽,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏献烦。R本人自食惡果不足惜滓窍,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望巩那。 院中可真熱鬧吏夯,春花似錦、人聲如沸即横。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽东囚。三九已至跺嗽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間页藻,已是汗流浹背桨嫁。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留份帐,地道東北人璃吧。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像废境,于是被迫代替她去往敵國和親畜挨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容