文档章节

电子邮件签名档 HTML 手写时的折腾(附 原创工具)

南漂一卒
 南漂一卒
发布于 2014/12/01 15:47
字数 1260
阅读 1364
收藏 6

入职必修课

鄙人作为码农进厂开电脑的第一件正事就是 —— 在 Foxmail 客户端中设置自己公司的域名邮箱,并加上看起来还挺专业的签名档

接收欢迎新人的邮件,选中老员工的签名档并复制粘贴到写邮件设置中,修改个人信息并保存 —— 这似乎很轻松,但…… 职位一处的文字稍长一些就显示不全…… 旁边那么多空白竟然不能自适应?!作为一个前端程序猿,简直不能忍 —— 改代码!

虽然 Foxmail 客户端的富文本编辑器几乎和 QQ邮箱一样(原本也是同一个团队的作品嘛),但竟然不支持 HTML 格式化…… 还好在线代码格式化工具很多。但格式化之后,代码依然很烂 —— 各种样式还用 HTML 4 的标签属性,style 属性也是一坨一坨地堆着,姓名、职位、手机、电邮等竟然还用 <input type="text" />……

Foxmail 自己加上去的全局样式不是用 <style /> 写在最前面吗?这么乱的代码,哥怎么有心情改?!写个简称得了,管你们看不看得懂~

收拾“旧河山”

俩月后,公司新产品上线,要在签名档已有的俩二维码中间再加一个 —— 公司网管兄用 DreamWeaver 死活改不好,于是来找我帮忙…… 那就不客气了 —— 直接用自己的 CSS 框架的布局模块来重写,那叫一个畅爽~

写完之后在浏览器里测试完美,便即刻粘贴到 Foxmail 中 —— 样式没了?!

再尝试用 Foxmail 邮件模板 —— 样式又没了?!

只好用浏览器调试器一个一个元素地把外联样式填回 style 属性中……

再试 Outlook —— 还是没样式!连 DataURL 形式的图片都叉了?!

前端猿的 Hack

最后只好登录公司邮件服务的 Web 版,在账号选项中设置签名档 —— 连 HTML 源码编辑模式都没了……

那就只能把 新签名档源码在浏览器中打开,再全选、复制、粘贴到邮件系统编辑框 —— 测试邮件基本正常,除了逼死强迫症的水平滚动条……(马丹,这不在同事面前显得我很没水平?!)

Web Mail 签名档设置

仔细查看测试邮件的源代码之后发现 —— 所有 style 的长度数值都从百分比变成了像素绝对值……

我想应该是 浏览器等客户端程序在复制 HTML 等富文本时把相对值转换成了绝对值,可以用下面的原创程序初步验证 ——

<!-- lang: js -->
(function (BOM) {
    var isIE = !(! BOM.document.attachEvent);

    BOM.CB_getData = function (cType, CallBack) {
        var This = this,
            EM = isIE ?
                    ['attachEvent', 'onpaste', 'detachEvent'] :
                    ['addEventListener', 'paste', 'removeEventListener'];

        if (cType && (! isIE))  switch (cType.toLowerCase()) {
            case 'text':    cType = 'text/plain';    break;
            case 'url':     cType = 'text/unicode';  break;
            case 'html':    cType = 'text/html';     break;
        }
        This.document[ EM[cType ? 0 : 2] ](EM[1], function () {
            var PO = isIE ? This : arguments[0];
            var CBR = CallBack.call(
                isIE ? PO.srcElement : PO.target,
                PO.clipboardData.getData(cType)
            );
            if (! CBR)
                if (isIE)  PO.event.returnValue = false;
                else PO.preventDefault();
        }, isIE ? undefined : false);
    };
})(self);

//  粘贴事件发生时,回调函数的首个参数 将赋值为 剪贴板中的内容
CB_getData('HTML', function (Content) {
    console.log(Content);
    return false;
});
//  返回 false 阻止浏览器 事件默认行为,即不在用户粘贴的地方输出 剪贴板内容(同 jQuery)

网管小哥只好把浏览器窗口拉窄一些再复制粘贴 —— 至少看起来没啥问题了……(但我知道在一些领导的轻薄笔记本、平板电脑等更窄的屏幕上还会溢出啊)

最后的最后 —— 在 Web 邮箱的签名档设置框中右击打开调试器,直接编辑它的 HTML 文档片段,把签名档源码粘贴进去再返回来保存 —— 发出来的测试邮件源码完整保留了长度值的百分比原值~

Web Mail 签名档编辑框内容代码注入

后话

按理说,E-mail 这种兼容 HTML 格式的经典互联网标准 应该至少支持 HTML 4 + CSS 2 吧?哥手写的布局系统基于 display: table(-cell) 就不行?

Outlook、Foxmail 等 Windows 邮件客户端 渲染 HTML 应该直接调用本机的 IE 内核吧?哥用的可是 IE 11 啊~

咋就这么多不兼容的坑坑呢……?


其实很多网站系统的富文本编辑框 都没有 HTML 代码编辑模式,直接复制粘贴富文本片段经常会格式出错(比如 微信公众平台编辑模式的图文消息发布模块)……

在后台程序过滤之外,前端工程师 能一劳永逸地解决此类问题的方法只有 —— 用 JavaScriptHTML 代码片段注入……

所以我写了个 Bookmarklet(网页浏览器 书签栏按钮小工具)发布在 Git@OSC 上,欢迎大家折腾、提 issue~

参考文章

  1. http://www.topcss.org/?tag=document-activeelement
  2. http://www.cnblogs.com/hughtxp/p/3939976.html
  3. http://blog.csdn.net/lee_magnum/article/details/17761441
  4. http://www.cnblogs.com/xzhang/p/3968204.html

© 著作权归作者所有

南漂一卒

南漂一卒

粉丝 35
博文 13
码字总数 6771
作品 1
成都
程序员
私信 提问
邮件实用技巧五:巧妙应用你的个性签名

对于经常发邮件的客户,特别是企业用户,对个性签名肯定不陌生。在邮件末尾附上自己公司的个性签名,包括自己姓名、联系方式、公司简要信息。在收件人阅读邮件时,个性签名不仅能传达发件人的...

月亮湖泊
2010/05/27
2.1K
0
怎样使用PDF Transformer+中数字化签署

如今的企业每天都要处理大量的文档文件,这些文件大多数是电子格式,然而,审批程序或者考虑到文档的合法有效,个人签名总是少不了的,签署电子文档(包括PDF)有很多方式,这取决于文档的目...

ABBYY
2016/01/19
25
0
使用Metasploit入侵安卓手机(超详细哦)

本文原创作者:newbie,本文属i春秋原创奖励计划,未经许可禁止转载! 1.环境准备: Kali2.0(msfVENOM、metasploit) 安卓手机 2.利用过程: 使用msfvenom生成apk木马 msfvenom -p android/mete...

i春秋学院
2017/03/29
5.7K
0
GnuPG 2.0.29 发布,邮件加密工具

GnuPG 2.0.29 发布了。GnuPG(GNU Privacy Guard)是一种加密软件,不仅可以用来加密和签名电子邮件,也可以用来签名和加密普通的文件。由 GNU 工程 依照IETF订定的OpenPGP技术标准设计开发实...

oschina
2016/04/01
801
0
程序视界3周岁!3重福利大放送!

想不到订阅号“程序视界”已经走过了三年的漫漫长路! 感谢你的一路陪伴,各位亲们,有你们同行,我才能坚持到现在。 感谢……感谢……感谢…… 今天我们就做 3 件事: 定位 程序视界公众号,...

imbrl71u7pt5x29rleu7
2018/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【0918】正则介绍_grep

【0918】正则介绍_grep 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 一、正则介绍 正则是一串有规律的字符串,它使用单个字符串来描述或匹配一系列符合某个语法规则的字符串。 二、grep工具 ...

飞翔的竹蜻蜓
21分钟前
4
0
为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
58分钟前
8
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
今天
4
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
今天
4
0
好程序员Java学习路线分享MyBatis之线程优化

  好程序员Java学习路线分享MyBatis之线程优化,我们的项目存在大量用户同时访问的情况,那么就会出现大量线程并发访问数据库,这样会带来线程同步问题,本章我们将讨论MyBatis的线程同步问...

好程序员官方
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部