前面说的是错误的做法，之后才开始注重起来。
【准备阶段】
先说一下我有一个处理缩略图的类，功能是可选的，比如可以单独以 ”宽“ 为基准设置缩略图，或者单独以 ”高“ 为基准制作缩略图。效果：假如选了宽度为 180 px（类中不含单位），那么高就通过算式自动降低比例与原图比例保持一致。反之亦然！
然后这个类我说一下，他只能这么用，要么用宽要么用高，如果宽高同时设置，那么他就直接将图片压扁了。所以只能设置 1 个为基准。
原图一律上传到临时文件夹，而真正发布时候才会生成缩略图，这一点由我其他方法完成略过。
然后缩略图的比例为 180px * 120px，如下：

一个帖最多可显示三个缩略图。
【一开始】
一开始是简单的将所有图都生成对应缩略图，当然宽全部是 180 px，自然高度无法确定，我前端做了 overflow:hidden 简单隐藏。因为宽度的生成已经被那个类定死了，所以不需要考虑宽度，只用jquery做了简单的高度居中。

自然有下列问题，当时只是懒得管将就一下，问题如下：
1.本身小于缩略图比例的图会被强制拉大到 180px
2.宽远长于高的图，在生成缩略图后，高自然降比就小于 120px 了

考虑到遇到的情况不算少，上面已经是整理出来的关键原因了，理一下思路，我在最后显示缩略图的那个类做了判断处理，识别原图的高宽把不符合的情况释放掉，只显示正常图片，但是，对于（宽高）大于 180 * 120 的图咋办？比例缩小后才会不符合条件，不在此判断范围内，于是我将所有的图都锁定比例降低至 宽一律为 180 的时候检查高度是否符合缩略图标准，不符合的释放掉。
但我遇到一个情况，就是正常的图也不见了，我看了下那个图，降低了他的宽至180，发现高度为119.5，与120差了0.5，我晕。这样牵扯的图实在太多了，得想个办法解决。于是就把后端的锁定比例检测的这一项去除。
【后来】
重新理了下思路，关键点在于释放不符合比例要求的图片还不够，生成缩略图的那个类也需要和显示缩略图的那个类一起处理完成这个任务才行。那就是在生成缩略图的类里得做个判断。
1.首先要符合大于缩略图的条件，180*120；
2.其次以宽为基准，降低至 180 并检查高度
3.在大于缩略图的情况下，就说明这张图有缩略的价值，但不符合条件2，那我就转换一个思维，瞬间切换成以高为基准生成缩略图。（没错，当宽度在180的情况下高度小于120，就代表其长大于其宽，我将转换以高为基准生成缩略图）
4.高度为 120 的情况下，宽度为多少不知道，后端显示的时候无需再次判断，将不符合条件的图释放掉。
5.前端做检测，将不符合的高宽各居中，如果都不符合条件则都居中，前端缩略图框 180 * 120全部都是占满的，不达到条件的图不会被显示，但确实都是一些真正小的图。
【重写整理】
1.拿到缩略图类后不急着生成，先锁定比例，以某以项属性为基准降比（比如 宽）。
2.将大于缩略图（符合缩略条件）比例，但在降比完成后又不符合缩略图要求的图，应该立刻切换成以另外一个基准生成缩略图（比如切换成 高）。
3.在缩略图的显示类，只需将不符合缩略图宽高要求的图片直接释放掉，不会显示在帖子首页。（无需锁定比例在检查，因为缩略图生成类已经完成不会生成对应缩略图）
4.前端控制图片居中
【最终】
不管啥类型的图，上传后显示到首页的缩略图，大小，值，宽高和清晰度都是完美的。

click与blur、focus的关系想必大家都清楚，mousedown的优先级是高于click的，在focus之前触发，而这样，这个问题就可以迎刃而解。
想要在鼠标离开焦点区域外点击某些特定元素不触发焦点离开事件，只需要在指定元素加上一个
onmousedown="return false"
即可。
如图所示：

如下代码：

编辑器版本：1.4.3.3 PHP版
首先进行分析：
进入编辑器的目录找到一个叫controller.php的文件：编辑器根目录\php\controller.php，打开进行查看。

发现其筛选并引入了一个带有“upload”字样的php文件，于是顺藤摸瓜，继续打开编辑器php目录下action_upload.php文件，如图：

发现打开后就发现出现一些未知变量，于是很醒目的看到顶部的一个 include "Uploader.class.php";，没事，接着顺藤摸瓜。再次打开编辑器php目录下Uploader.class.php文件，看到如下所示：

第一眼就看到了很醒目的private $filePath;这一行，即便对英文不敏感，也可以看到后方的注释，是一个文件路径。于是搜索它在该文档的其它地方，当然你可能会搜索到一些无关的。我搜索到其中之一如下：

该函数getFilePath();如此的醒目，以至于不得不让我再接着顺藤摸瓜，紧接着如下：

搜索到该函数的时候，你会看到一个私有方法。好了，基本已经确定了，不必再深究$rootPath = $_SERVER['DOCUMENT_ROOT'];首先这个方法很常见，php开发者用过就知道其作用是取网站当前根域名。即便不知道，看着变量$rootPath也该知道吧。
接下来我们应该打开编辑器的php目录下的config.json文件，如下：

该说的图中已经全部说明了，在我们已知后端是通过这种方法获取上传路径的，其不包括后缀路径“/”，则其起点就是根域名，那么 ???/ueditor “/ueditor”的前面，就直接是和域名拼接着，故此其图中红色框区域圈起来的就是各位要加上的项目路径了。当然事实验证说明我的判断正确性，如下：

从上传图片到编辑器，再到发布，均能够正常显示，中途未出任何差错。由于百度这里用的是拼接起来进而形成的“绝对路径”，故此大家千万不要去改后端文件夹，去在根域名$_SERVER['DOCUMENT_ROOT'].'xxx'后拼接自己的项目文件夹名称，那是绝对作死的方法。因为config.json文件中的imagePathFormat":这行，“/ueditor”前面根的是绝对的根域名，而不是你后端修改或拼接起来的路径。

总结一下：

最终的修改方法，其实就是将“config.json”文件中的“"imagePathFormat":”这行，在“???/ueditor”前加上项目名称即可。

首先是普通PHP里面可能混编着HTML代码与PHP代码，这样不利于维护。有的还需要在上面做多次循环html代码，故此想着这两家能分开

首先如上图所示就是一个普通PHP文件，但是，下面我将信息全部存入数组，这主要是顶部导航栏，所以说这个是整个站点顶部的通用部分，所以换成任何页面，引入的都是这个 header.php，但用了模板引擎后，header.php 便不复存在，只存在一个 header.html，这个 header.html就是我网站顶部的通用导航栏，里面有固定的格式，比如 title部分。如下两张图所示红框区域：

用数组收集信息的好处是，每当变化主题页面，也就是不管页面内容发生什么巨大变化，反正我用的是同一个导航栏同一个
header.html ，所以，每个PHP都能用数组进行信息的收集与归类，使用相同的变量对模板进行输出，而模板则设置好等待变量等待变化即可。如下图所示：

再看看class.php的，我首先设定一下PHP逻辑部分与模板部分的通信口“即绑定模板文件”，如下所示，我用的是 Smarty模板引擎，是一个框架。

设定好路径之后，我们对 class.php 的页面设置一下信息，如下数组：

不好意思，上面数组放错图了，我的锅！（如下补图）

然后将数组赋给一个变量，将此变量以 smarty的方式输送给绑定的模板：（如下图）

其中，assign函数是模板的函数，函数有两个参数，左侧用双引号或者单引号括起来，是 string 类型的字符串常量，具体的也可用其他(String)类型的变量替代，我们知道PHP是弱类型语言，讨论这个没意义。而左侧这个字符串起到的效果，对PHP来说“毫无效果”，对模板来说，他就是模板变量，包括数组变量。再说一下右侧，右侧的就是当前PHP页面中的其他变量，你需要将PHP中的信息输出到模板，那么这个变量就起到转化作用，将右侧的变量转化为左侧的模板变量并输出至模板。

然后再看看 class.html模板，我刚才说了，header是通用的头部文件，故此现在使用模板语法，在class.html 中 include 'header.html' 文件，而 header.html 文件中的截图在上面展现过了

再看看 smarty还有什么功能，（如下图），有if...else，section等，section 是smarty 里面一个最好用的循环，相比for之类，他能够将PHP从数据库查找的多条数据遍历好的结果至模板展现，附加价值非常高，即循环也输出变量，并按二维数组（或者理解为数据库的条数）进行输出，循环一次便向下一次。

其实smarty的语法很多，基本上可以认定为一个新的语言，但是，只需要了解一些特殊的，因为，html模板我讲求的是尽量少的逻辑，所以，再多的模板语法恐怕也不适用。