百度推出了UEditor，网页富文本所见即所得编辑器啊。下载回来体验的时候使用了一个比较强悍的配置，于是看到了如下画面：

画面：

全屏按钮后面的工具条变得太猥琐了，正确效果(应该是吧)或者说是想要的效果应该是这样：

 

 

这下好了，看看那里除了问题呢？在chrome下开启检查元素(开发者工具,F12快捷键调出)，查看发现工具条上只有FullScreen按钮使用了float:right 属性。是元素浮动引起的。试试在开启检查元素中直接编辑页面HTML，添加如下html内容效果正常了

<div style="clear:both"></div>

接下来，考虑代码上的解决方案。因为只有FullScreen按钮出现这个问题，那么在仅显示FullScreen按钮时在按钮后面紧跟着输出上面的html内容就可以解决这个问题了。于是查看UEditor的代码，不错，很容易看懂。找到editro.js（开发模式，是多个js文件存放,_scr/ui/eidtor.js）。找到getHtmlTpl函数，修改前实现如下：

        getHtmlTpl: function (){
            return '<div id="##" class="%%">' +
                '<div id="##_toolbarbox" class="%%-toolbarbox">' +
                 '<div id="##_toolbarboxouter" class="%%-toolbarboxouter"><div class="%%-toolbarboxinner">' +
                  this.renderToolbarBoxHtml() +
                 '</div></div>' +
                 '<div id="##_toolbarmsg" class="%%-toolbarmsg" style="display:none;">' +
                  '<div id="##_upload_dialog" class="%%-toolbarmsg-upload" onclick="$$.showWordImageDialog();">点此上传</div>' +
                  '<div class="%%-toolbarmsg-close" onclick="$$.hideToolbarMsg();">x</div>' +
                  '<div id="##_toolbarmsg_label" class="%%-toolbarmsg-label"></div>' +
                  '<div style="height:0;overflow:hidden;clear:both;"></div>' +
                 '</div>' +
                '</div>' +
                '<div id="##_iframeholder" class="%%-iframeholder"></div>' +
                //modify wdcount by matao
                '<div id="##_bottombar" class="%%-bottomContainer">' +
                '' +
                '' +
                '<table class="ke-zeroborder"><tbody><tr><td id="##_elementpath" class="%%-bottombar"></td><td id="##_wordcount" class="%%-wordcount"></td></tr></tbody></table></div>' +
                '</div>';
        },

修改后如下：

        getHtmlTpl: function (){
			var clear = '';
            var toolbarItems = this.toolbars[0].items;
			if(toolbarItems.length == 1)
				clear ='<div style="clear:both;"></div>';
            return '<div id="##" class="%%">' +
                '<div id="##_toolbarbox" class="%%-toolbarbox">' +
                 '<div id="##_toolbarboxouter" class="%%-toolbarboxouter"><div class="%%-toolbarboxinner">' +
                  this.renderToolbarBoxHtml() +clear+
                 '</div></div>' +
                 '<div id="##_toolbarmsg" class="%%-toolbarmsg" style="display:none;">' +
                  '<div id="##_upload_dialog" class="%%-toolbarmsg-upload" onclick="$$.showWordImageDialog();">点此上传</div>' +
                  '<div class="%%-toolbarmsg-close" onclick="$$.hideToolbarMsg();">x</div>' +
                  '<div id="##_toolbarmsg_label" class="%%-toolbarmsg-label"></div>' +
                  '<div style="height:0;overflow:hidden;clear:both;"></div>' +
                 '</div>' +
                '</div>' +
                '<div id="##_iframeholder" class="%%-iframeholder"></div>' +
                //modify wdcount by matao
                '<div id="##_bottombar" class="%%-bottomContainer">' +
                '' +
                '' +
                '<table class="ke-zeroborder"><tbody><tr><td id="##_elementpath" class="%%-bottombar"></td><td id="##_wordcount" class="%%-wordcount"></td></tr></tbody></table></div>' +
                '</div>';
        }

后来发现，不做如上代码中的判断直接在this.renderToolbarBoxHtml()之后增加"

<div style="clear:both;"></div>

"也可。

总结：

这是一个冷门bug，除了我这么YD没人会发现。

bug是由于float元素浮动引起的。使用clear：both解决

可以发生的版本：

我用的是1.1.7.3