百度编辑器去掉图片间空隙,图片宽度自适应

1、增加一个普通按钮（上）让百度编辑器上传的图片无空行（空隙），在手机端展示的图片之间无空隙下面就让我们从最简单的功能开始UEditor的二次开发之旅：在工具栏上增加一个按钮,点击按钮的时候把编辑器中的所有图片设置为左浮动，宽度设为100%。第一步：找到ueditor.config.js文件中的toolbars参数，增加一个“xedpic"字符串，对应着添加一个labelMap，用于鼠标移上按钮时的提示。toolbars:., 'searchreplace','help', 'fixedpic',labelMap: 5'help&#

2、39;:'帮助','fixedpic':'图片左浮动，宽度 100%'例如：下图为自定义了一个fixedpic的按钮第二步：找到ui/editorui.js文件中的btnCmds数组，在其中同样增加一个fixedpic "字符串。例如：1.4.3版的在ueditor.all.js中添加'diart s 1 : ' ahart s/t njrt s htul'h"PT壁诃星闫Ljll眉a科W:I= 西Bundio 1 j, p redo11' fornwt watc h ' j'&

3、gt; P1 Italic " a 'r-derllpne ' , ' font bar4l* r * Ja' tolowsrcasrie-*'¥trif# "尊胡卩戶霍首r iplf'isure#1 # ' indfunt" f 'g' t1 blockfjuD七=1 aaitep-laxn 11 pag«dbreak4 j,'se Lee tellr j. 1 pr lnt1' hor 1 zootal' >' re<iciw

4、efon*ait ,8 mate' j. "51"配上1 inAble 1 j,4 APtcol1 x "wtfrgsright1 j, "嘗e鈕t'dalatKol" a ' splittorenn 1 a Kspl.ittncale ' a " cplitt口£总11石."niHrHocfll 1e " r ' dalstetabla 1 p 'drafte ' rH" B"fixadpir" 第三步：清空缓存刷新下

5、页面吧！ 工具栏的对应位置是否出现了一个自己定义的按钮呢？如i SI AxJ Xj >寸* 亍& :二 41B圭，亍.：写.孚空学冒聖竺 M整=£心 测阳 一富1 - IT匡征百”!=T A 8 xi A SL M r砂妬弧坯:如由于此时未设置对应按钮的图片样式，所以会显示默认的 要的图标样式，接着按照下面的步骤动手吧。B”符。要想让其显示成自己需第四步： 找到themes/default/css/ueditor.css 文件，增加一条样式定义 .edui-for-fixedpic .edui-ic on backgro un d-positi on: -700px -

6、40px;HGmrc 歼etipp3 ctwnnHinl j tkrdifrer» fl Hflhchm囱 ItacarriMitWuedtctf.汀 djilagfI' n 鈕耳 bfmlb哼* ihmiM.曲 d聽aHli询 C-3Pxj Lydite hr 1.5.15MJ1S93ims18961OT71®9919C1id19021W3i-41闻&n1891rf&如 Te?i (扫It暮Exmcl - p鼻ion =79&p莺 4咋巧tfu i f r -ttfw i -ptis C£t4fi,tiQ, ibac ILgiro

7、urnd - pcK 11 i dtij : 72pjr - 34pjf t = buttonbar kgrciLffid pot it inn : -协；edut -die/A* .edi/L -jpa,Ste?c<Jftt<3,ine?Fi >.edui. - btfitf b«c kgrcujtid - poll iti Qn> i l OSx 羽细；edu t. -de/<?iU L ti -pcstec-ofTt-ffififeF*- SLfyE-Ewttofiitgrcurtd - pos i 11 on t Ki?完成后刷新浏览器，可以看到

8、此时图标已经显示为如下图所示:t QT ¥皆 1X1nyj二 T :二=A& <M 1 bZ il !酉1 H 0 il显衣肯息捋于)-rcfu-i - 5 t Lfi ihevcF B eriu i. -F-ii此处的样式定义了 showmsg 图标在 UEditor 默认的精灵 Icon 图片 (themes/default/images/icons.png )中的位置偏移。如需更改成另外图标，只需添加图标到 该图片文件中，然后设置偏移值即可。第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑， 但是我们发现点击按钮之后毫无反应。那是必然

9、的，我们还必须为该按钮绑定属于它自己的事件处理方法。实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。下面我们就来定义该方法的具体内容：143版的在ueditor.all.js中添加:/自定义按钮，将图片左浮动，宽度变为100% ma nds'fixedpic' = execComma nd:fun ctio n() var imgs =this .document.getElementsByTagName("img");for (var i= 0,img;img = im

10、gsi+;)img.removeAttribute("width");img.removeAttribute("height");$(img).css("width","100%");$(img).css("height","");$(img).css("float","left");效果如下：if4!) “ 1 bridle4)(vir tst - U 血dMc *缶离，皿尊昔toKMMDHK C0WVYWIL 匚I lDt-rt!j

11、5(3”.胡I iM.hwJ lZJ->= U ： !.sKperlang_a協斛詔比和Ljn( uBdABr.HlLnrnn.jH 152C -:L *rn l ipjrenthiDdc - xneirt fcf oret j n ) j；in H yun七Nhde H remw¥e£hiildb. n ) p3Z>fh：-描厨片左李卞为HE曲n< _ csfiiufldi "f iMdpie4 :vNctim ()(var- hxi. doc jnc-nt-. jflr±El-s-rK-n*tiGB/TjgFJAw ' &q

12、uot;"ingf0-(war 1= 0j img; img = i-g&l i*+ ;)£14.口BdVvAE tf” roacvaAt t pi but 9 (3 gh* ° ) j$( irng)”匚"(怙 idt hr. wiea&M)； SdnMJ-cwfheightS( i 啊)lost wLeFt,!);再次刷新页面点击一下按钮吧!点击按钮前齐 出口 av* 4 丿時* A *；*19女 IM MW 甬歲."H "C* IflB点击后，图片间的空隙没了，且图片的宽度100%，去掉了高，这样图片就能在手机端

13、自适应宽度和高度了!El J U M K1 JCi F 厂 A *1±T*-' * M * 出 * -=源码 *1 TI | Il J U Afl1 户1快3"坦片匕：打1 常 VlfLro'va-'W.'HKjof B rl>j*«"VLa*r 3*nid®1 TtU- L- lt*wuiA Eijy crca"- rrrx . IhN.LHH dtf? kidL39 »* JEliKmliilil n>l*r_kTM lAM, Rie _ l*#r，- t1tT4” Ii .-F ftfl #广 *4>lng «rc- Htt»：l«.m IMitn 1Q7 «UiLKgrQ>v.,MVVa'iv.- U.51a?qKb=<Mlhr17*<jgij 网-5 - ¥|ij