文档章节

再战“所见即所得”富文本编辑器(附 原创工具)

南漂一卒
 南漂一卒
发布于 2016/03/16 17:52
字数 527
阅读 156
收藏 0

未尽的事业

2014年底,我为了搞定 电邮签名档 做了次专门的研发,非常有收获!但它依然有个 ——

外置 CSS 样式 要人工一一填到 HTML 标签的 style 属性中,图片也要自己转换成 Base64 编码……

2016年初,我又遇到需要手写 富文本电邮的一件事,手工转换一个大网页 —— 累个半死…… 同时,女友也在为“微信公众平台 图文消息编辑器 不能在文章正文加超链接”发愁,想用我当年开发的 HTML 代码注入工具 除了学会写 静态网页代码,还是要我手工转换为 单一网页格式(类似 Internet Explorer .mht)……

编程马拉松

基于不久前对 CSS 对象的深入研究,我用之前两个夜晚的饭后休息时间完成了一个 网页代码 行内化工具的开发、测试 ——

javascript:  (function (BOM, DOM) {

    /* ---------- 生效样式 ---------- */

    function Tag_Computed_CSS(iDOM) {
        return JSON.parse(JSON.stringify(
            iDOM.ownerDocument.defaultView.getComputedStyle(iDOM)
        ));
    }

    /* ---------- 原始样式 ---------- */

    var Tag_Style = { },  iSandBox = DOM.createElement('iframe');

    iSandBox.style.display = 'none';
    DOM.body.appendChild( iSandBox );

    function Tag_Default_CSS(iTagName) {
        var _DOM_ = iSandBox.contentWindow.document;

        if (! Tag_Style[iTagName]) {
            var iDefault = _DOM_.createElement( iTagName );
            _DOM_.body.appendChild( iDefault );
            Tag_Style[iTagName] = Tag_Computed_CSS(iDefault);
            _DOM_.body.removeChild( iDefault );
        }
        return Tag_Style[iTagName];
    }

    /* ---------- 变更样式 ---------- */

    function Tag_Customed_CSS() {
        var iCustomed = { },
            iComputed = Tag_Computed_CSS( arguments[0] ),
            iDefault = Tag_Default_CSS( arguments[0].tagName.toLowerCase() );

        for (var iAttr in iComputed)
            if (
                isNaN(Number( iAttr ))  &&
                (! iAttr.match(/^(moz|webkit|ms)/))  &&
                (iComputed[iAttr] != iDefault[iAttr])  &&
                (! iAttr.match(/width|height/i))
            )
                iCustomed[iAttr] = iComputed[iAttr];

        return iCustomed;
    }

    /* ---------- 内联化核心 ---------- */

    BOM.CSS_Inline = function () {
        var iStyle = Tag_Customed_CSS( arguments[0] );

        for (var iAttr in iStyle)
            arguments[0].style[iAttr] = iStyle[iAttr];
    };

    BOM.Image_Inline = function (iDOM, iWaterMark) {
        var _Image_ = new Image(),  iCanvas = DOM.createElement('canvas');

        _Image_.crossOrigin = '';
        var iContext = iCanvas.getContext('2d');

        _Image_.onload = function () {
            iCanvas.width = _Image_.width;
            iCanvas.height = _Image_.height;
            iContext.drawImage(_Image_, 0, 0);

            if (iWaterMark) {
                iContext.font = '20px sans-serif';
                iContext.fillStyle = 'white';
                iContext.fillText(iWaterMark,  10,  _Image_.height - 15);
            }
            iDOM.src = iCanvas.toDataURL('image/png');
            _Image_ = null;
        };
        _Image_.src = iDOM.src;
    };

    BOM.Web_Inline = function () {
        var iTag = arguments[0].querySelectorAll('*');

        for (var i = 0;  i < iTag.length;  i++)
            switch ( iTag[i].tagName.toLowerCase() ) {
                case 'meta':      ;
                case 'style':     ;
                case 'script':    ;
                case 'iframe':
                    iTag[i].parentNode.removeChild( iTag[i] );    break;
                case 'img':
                    this.Image_Inline(iTag[i], arguments[1]);     break;
                default:
                    this.CSS_Inline( iTag[i] );
            }
        return arguments[0].innerHTML.trim();
    };

    /* ---------- 使用流程 ---------- */

    BOM.Web_Inline(DOM.body, BOM.prompt("图片水印文字:"));

    BOM.setTimeout(function () {
        DOM.body.textContent = DOM.body.innerHTML;
        BOM.alert("请全选、复制当前显示的所以代码~");
    }, 1000);

})(self, self.document);

© 著作权归作者所有

南漂一卒

南漂一卒

粉丝 35
博文 13
码字总数 6771
作品 1
成都
程序员
私信 提问
10个免费的javascript富文本编辑器(jQuery and non-jQuery)

祝愿园子里的朋友圣诞节快乐。 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascript富文本编辑器使我们添...

老鸟的空间
2014/07/05
572
1
DevExpress .NET界面示例集锦

DevExpress Demo示例展示:仿Office的Winforms界面框架 DevExpress Demo示例展示:高性能ASP.NET界面开发框架 | 附在线演示 DevExpress Demo示例展示:令人惊艳的WPF界面框架 | 附安装程序 ...

百mumu
2015/12/15
346
0
Eleditor —— 移动端跨平台富文本编辑器

由于移动设备的交互方式,传统的 PC 富文本编辑器在移动手机、平板上面无法达到良好的操作体验,Eleditor(element editor)顾名思义,旨在对 html 元素进行操作编辑,实现了唯一开源的真正所...

王练
2017/06/05
81
0
移动端富文本编辑器--Eleditor

由于移动设备的交互方式,传统的PC富文本编辑器在移动手机、平板上面无法达到良好的操作体验,Eleditor(element editor)顾名思义,旨在对html元素进行操作编辑,实现了唯一开源的真正所见即...

小小鸟e
2017/06/04
6.8K
5
不到200行 JavaScript 代码如何实现富文本编辑器

摘要:前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小。而...

吴锴的博客
2018/01/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

怎样在磁盘上查找MySQL表的大小?这里有答案

导读 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎...

问题终结者
37分钟前
6
0
jQuery load() 方法实现加载远程数据

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 语法: $(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的...

前端老手
39分钟前
5
0
Spring Boot缓存实战 Redis 设置有效时间和自动刷新缓存-2

问题 上一篇Spring Boot Cache + redis 设置有效时间和自动刷新缓存,时间支持在配置文件中配置,说了一种时间方式,直接扩展注解的Value值,如: @Override@Cacheable(value = "people#${s...

xiaolyuh
47分钟前
9
0
怎样在磁盘上查找MySQL表的大小?这里有答案

我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应...

Linux就该这么学
今天
5
0
Redis

一、Redis支持的几种数据类型:字符串、List、SET、HASH、ZSET 二、Redis的缓存技术主要是为了降低关系数据库的负载并减少网站成本 三、在Redis里面,被MULTI命令和EXEC命令包围的所有命令会...

BobwithB
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部