富文本编辑器的一键排版功能

在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直接把word文件转换为网站上可以直接浏览的内容,他们不关心你中间用了什么技术,也有人专门对此做了一些前端控件的开发,然后按用户进行授权,似乎销售成绩还不错。

网络上有很多自称为“一键排版”的小工具,只是他们只是工具,不是类库或者API,开发者不能直接使用,来分析其中一个是如何实现的,首先下载并安装,安装后在系统目录中能够看到它主要也是用web编程技术,只是在外面套了一个窗体便于程序的运行,如截图所示:

打开index.html即可找到和“一键排版”按钮对应的函数FormatText,代码内容如下:

function FormatText() {
 var myeditor = document.all.Composition;
 if (Format == "Normal") {
 var temps = new Array();
 var tmps = new Array();
 var sec = myeditor.Document.selection.createRange();
 var tmpText = sec.text;
 var isPart = tmpText != null && tmpText.trim().length > 0;
        isPart = false; //暂时无法实现局部格式化
 if (!isPart) {
 var imgs = myeditor.Document.images;
 if (imgs != null && imgs.length > 0) {
 for (j = 0; j < imgs.length; j++) {
 var t = document.createElement("IMG");
                    t.alt = imgs[j].alt;
                    t.src = imgs[j].src;
                    t.width = imgs[j].width;
                    t.height = imgs[j].height;
                    t.align = imgs[j].align;
                    temps[temps.length] = t;
                }
 var formatImgCount = 0;
 for (j = 0; j < imgs.length; ) {
                    imgs[j].outerHTML = "\n#FormatImgID_" + formatImgCount + "#\n";
                    formatImgCount++;
                }
            }
 if (iftable.checked) {
 var tables = myeditor.Document.getElementsByTagName("table");
 if (tables != null && tables.length > 0) {
 var formatTableCount = 0;
 for (var k = 0; k < tables.length; ) {
                        tmps[tmps.length] = tables[k].outerHTML;
                        tables[k].outerHTML = "\n#FormatTableID_" + formatTableCount + "#\n";
                        formatTableCount++;
                    }
                }
            }
 var html = processFormatText(myeditor.Document.body.innerText);
 var border = "";
 if (ifborder.checked)
                border = "border=\"1\"";
 else
                border = "";
 if (temps != null && temps.length > 0) {
 for (j = 0; j < temps.length; j++) {
 var imghtml = "<center><img src=\"" + temps[j].src + "\" alt=\"" + temps[j].alt + "\" width=\"" + temps[j].width + "\" height=\"" + temps[j].height + "\" align=\"" + temps[j].align + "\" " + border + "></center>";
                    html = html.replace("#FormatImgID_" + j + "#", imghtml);
                }
            }
 if (iftable.checked) {
 if (tmps != null && tmps.length > 0) {
 for (k = 0; k < tmps.length; k++) {
                        html = html.replace("#FormatTableID_" + k + "#", tmps[k]);
                    }
                }
            }
            Composition.document.body.innerHTML = html;
        } else {
 var html = processFormatText(tmpText);
            html = html.toUpperCase();
            html = html.replace(/<P>  <\/P>/g, "");
            html = html.replace(/<P><\/P>/g, "");
            sec.pasteHTML(html);
        }
    }
 else
        alert('必须在设计模式下操作!');
}
 

主要也就是实现了:段首(P标记)自动空两格、图片自动居中、段与段之间自动空一行之类的功能,那么好了,可以把这些功能集成到富文本编辑器中使用户不至于在两个地方对一篇文章进行排版了,其实这样的代码也很多,比如CKEditor上的插件实现就很多,一搜一大把,比如一个叫做autoformat的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯Bugly的专栏

移动App入侵与逆向破解技术-iOS篇

如果您有耐心看完这篇文章,您将懂得如何着手进行app的分析、追踪、注入等实用的破解技术,另外,通过“入侵”,将帮助您理解如何规避常见的安全漏洞,文章大纲: 简单...

2.5K6
来自专栏GreenLeaves

JavaScrtip之JS最佳实践

一、JavaScript之平稳退化 这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例: JavaScript使用window对象的open()方法来...

2325
来自专栏小程序之家

如何在小程序中实现扫一扫功能

扫码,是现代生活不可或缺的一部分,不管是实现共享单车开锁,还是去自动售卖机付款,都需要扫码二维码或者条形码。那么,可不可以将扫码功能集成在小程序端呢?答案是可以...

2.6K4
来自专栏葡萄城控件技术团队

七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC

? 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据...

3865
来自专栏Seebug漏洞平台

TCTF/0CTF2018 XSS Writeup

刚刚4月过去的TCTF/0CTF2018一如既往的给了我们惊喜,其中最大的惊喜莫过于多道xss中Bypass CSP的题目,其中有很多应用于现代网站的防御思路。...

1263
来自专栏逸鹏说道

MVCforum 支持多国语言

MVCforum支持多国语言。要创建一个更新的语言,你需要去您的管理面板 /admin/ adminlanguage 在这里,您可以添加新的语言键和关联的值。或...

2744
来自专栏前端安全

和XSS漏洞对抗的日子

前端安全日益受到业内的关注,最近笔者和团队在和XSS漏洞对抗的这段时间,总结了部分常见的漏洞和修复方法,下面将结合具体业务对这些漏洞类型进行分析。

37715
来自专栏向治洪

ECMAScript 6 入门简介

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言...

1967
来自专栏求索之路

让你的Mac成为超高效率的工作工具(Keyboard Maestro 和 Alfred的整合)

用mac已经有了一段时间了,作为一个爱折腾(懒)的程序员,我花费了大概一周的时间将自己的mac打造成了一个超高效率的工作工具,先展示一下其中的一个成果。 ...

73711
来自专栏互联网杂技

如何学习用Typescript写Reactjs?

首先扫盲一下,先从搭建环境开始: 1.安装node,因为ts的编译器是js/ts写的; 安装node后同时获得npm命令,这是nodejs世界里的包管理器...

59212

扫码关注云+社区

领取腾讯云代金券