富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直接把word文件转换为网站上可以直接浏览的内容,他们不关心你中间用了什么技术,也有人专门对此做了一些前端控件的开发,然后按用户进行授权,似乎销售成绩还不错。
网络上有很多自称为“一键排版”的小工具,只是他们只是工具,不是类库或者API,开发者不能直接使用,来分析其中一个是如何实现的,首先下载并安装,安装后在系统目录中能够看到它主要也是用web编程技术,只是在外面套了一个窗体便于程序的运行,如截图所示:
打开index.html即可找到和“一键排版”按钮对应的函数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的。
富文本编辑器的一键排版功能相关推荐
- fastnest怎么一键排版_富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...
- php编辑器自动排版,phpcms v9在线编辑器增加一键排版功能
v9使用的Ckeditor编辑器,在使用过程中有些不尽人意的地方,下面我来修改一下编辑器,改动几个地方,让Ckeditor编辑更加实用一些. 此次修改的内容有批量去除超链接.上传图片自动添加ALT参数 ...
- php自动排版的快捷键,PHPCMS V9教程:ckeditor编辑器添加一键排版功能
v9使用的Ckeditor编辑器,在使用过程中有些不尽人意的地方,下面我来修改一下编辑器,改动几个地方,让Ckeditor编辑更加实用一些. 此次修改的内容有批量去除超链接.上传图片自动添加ALT参数 ...
- 富文本编辑器实现一键粘帖word图片
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- AVUE 富文本编辑器 avue-plugin-ueditor 格式刷功能 ver.0.2.7
avue-plugin-ueditor 版本:0.2.7 背景: 依据操作人员需求,认为目前在线编辑器没有ckeditor好用,也没有格式化的功能,目前项目是基于avue框架开发,使用了avue-pl ...
- 百度富文本编辑器UEditor配置及功能实现详解
当前功能基于PHP,其它语言流程大抵相同. 大概流程: 1. 将docx文件上传到服务器中 2. 使用PHPoffice/PHPword实现将word转换为HTML 3. 将HTML代码返回并赋值到编 ...
- EXTJS中整合tinymce的富文本编辑器,添加上传图片功能
提供部分代码.Ext.create('Ext.window.Window', {id: 'wind',title: 'CRUD窗口',modal: true,height: 800,width: 10 ...
- 富文本编辑器实现一键复制word图片
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...
- 富文本编辑器文件上传功能Demo
1.配置MVC文件:CommonsMultipartResolver <!-- 4.文件上传视图解析器 ctrl+Shift+T要求:bean的名字必須為multipartResolver--& ...
最新文章
- django template语法
- 架构评审,技术总监怒了,丢给我 400 个架构案例,先研究透!
- 产品生涯,十大好用但不为人知的APP
- 利用koa实现mongodb数据库的增删改查
- c 汇编语言用标准函数代替,C与汇编的接口技术
- 用js写出水仙花数,JS 水仙花数
- JavaWEB开发的国际化
- Visual C#.Net网络程序开发-Tcp篇(1)
- 【Java企业级开发二】jsp简答题汇总
- 龙哥手把手教你学LabVIEW视觉-深度学习简明教程【halcon篇】
- php转繁体代码,php实现简体转繁体的方法
- Java中new Date插入mysql数据库,数据库时间多一秒问题
- 「docker实战篇」python的docker- 抖音视频抓取(中)(25)
- BigWorld MMO
- python解决买鸡问题:3文钱可以买1只公鸡,2文钱可以买一只母鸡,1文钱可以买3只小鸡。用100 文 钱买100 只鸡,那么各有公鸡、母鸡、小鸡多少只?
- 产品经理笔试面试准备
- uni-app修改代码,微信开发者工具不更新
- AWS之(2) RDS数据库新建
- MySQL建表1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL
- 陈安之励志演讲经典句子