零基础的 PhotoShop CEP 6 开发教程 「 7 」UI - HTML 开发的一些细节

《零基础的 PhotoShop CEP 6 开发教程》系列目录

「 0 」目录
「 1 」配置开发环境
「 2 」CEP 文件结构
「 3 」CEP 的运行机制
「 4 」Hello World ！
「 5 」事件（EVENTS）
「 6 」调用 JSX 并传递信息
「 7 」UI - HTML 开发的一些细节
「 8 」API - 文件读写与二进制数据
「 9 」签名打包与 ZXPSignCmd
「 X 」CEP 更新到 6.1版了

---

CEP 面板实际上就是一个 Chormium 改造的浏览器（准确来说是 LIBCEF），在 CC2015 上 LIBCEF 版本为 3.1453.1339 相当于 Chormium 27，也就是对 HTML5 支持程度相当于 2013 年的 Chrome .

HTML5 和 CSS3 支持程度

在 html5te.st 测试可以到达 448 分 ,作为对比 Chrome 45 是 521 分，总的来说对 HTML5 的支持程度还是很好的，主流特性都可以使用。

具体测试结果：http://html5te.st/c3b7c42b06cae538

CSS3 在 css3test.com 测试可达 47% ， 作为对比 Chrome 45 是 52%，也很高了。
具体测试结果：http://77we48.com1.z0.glb.clouddn.com/CEP_CSS3_TST.html

使用 jQuery 的坑

jQuery

jQuery 是最常见的 JavaScrip 库了，不过在 CEP 上使用 JavaScrip 得注意了，按通常方法把 jQuery 加入你的页面中会意味的出现 " $ 未定义" 的错误，这时需要在载入前加入一句：window.module = undefined 否则 jQuery 是无法把自己注册到 "$" 符号的，如下：

不过奇怪的是，使用的这个 jquery-2.0.2.min.js 不会出现这个问题，不过要是想使用最新版的 jQuery 的话还是使用前面的办法吧。

字体显示问题

CEP 对一些字体（尤其是中文）的显示有问题，会出现无法显示的问题。这个暂时无法解决，除非手动编辑字体。

左边是 Chrome 45 中，右边是 CC2015 中的 CEP 面板

远程调试

CEP 的远程调试是非常方便的调试方法（使用方法在 「 1 」配置开发环境 ，不过要注意的是，在浏览器窗口打开的是 LIBCEF 的调试工具网页， 而不是你浏览器的调试工具。

使用”放大镜“工具方便的定位