富文本编辑器的一键排版功能
在做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的。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2012-06-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读