fastnest怎么一键排版_富文本编辑器的一键排版功能
在做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
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[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
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
var imghtml = "
";
html = html.replace("#FormatImgID_" + j + "#", imghtml);
}
}
if (iftable.checked) {
if (tmps != null && tmps.length > 0) {
for (k = 0; k
html = html.replace("#FormatTableID_" + k + "#", tmps[k]);
}
}
}
Composition.document.body.innerHTML = html;
} else {
var html = processFormatText(tmpText);
html = html.toUpperCase();
html = html.replace(/
/g, "");
html = html.replace(/
/g, "");
sec.pasteHTML(html);
}
}
else
alert('必须在设计模式下操作!');
}
主要也就是实现了:段首(P标记)自动空两格、图片自动居中、段与段之间自动空一行之类的功能,那么好了,可以把这些功能集成到富文本编辑器中使用户不至于在两个地方对一篇文章进行排版了,其实这样的代码也很多,比如CKEditor上的插件实现就很多,一搜一大把,比如一个叫做autoformat的。
fastnest怎么一键排版_富文本编辑器的一键排版功能相关推荐
- 富文本编辑器的一键排版功能
在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打开一个本地的word文件的时候系统能够直 ...
- kind富文本编辑器_富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
- android 富文本编辑器_富文本编辑器原理探索
经常在做企业网站的管理系统的时候需要用到富文本编辑器,之前基本上都是直接去 npm 或者 github 上面搜找一些排名考前或者 readme 写的好的库,直接拿来用.万变不离其宗,是时候探索下本质了 ...
- android 富文本编辑器_富文本编辑器,还是Tinymce好一点?Angular/Vue集成最新版
以前jQuery.PC网页时代,富文本编辑器一直就是百度Ueditor.KindEditor.现在使用Angular.Vue.React等MVVM架构以及最新的大前端 工程模式下,老的编辑器显然不更新 ...
- kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法
[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下 富文本编辑器上传图片 一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...
- word、wps图文复制一键粘贴到富文本编辑器
从word.wps里图文复制粘贴到如tinymce.ckeditor.ueditor等富文本编辑器里,file:///C:/Users/lifuhai/AppData/Local/Temp/ksoht ...
- 富文本编辑器实现一键粘帖word图片
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- java富文本如何转义_富文本编辑器wangEditor中转义字符的问题
前段时间做项目的时候,要使用富文本编辑器,采用的是wangEditor,结果当用户在为文本添加样式的时候,发现居然无法直接保存,遂查看后台数据.发现很多样式都被过滤掉了,后台接受的数据中根本没有样式. ...
- java pdf 富文本_富文本编辑器保存的html内容使用itextpdf转PDF文件(css提取,内容重叠)问题解决...
html格式处理 使用itextpdf的XMLWorkerHelper组件转换过程当中,html格式要求比较多,下面作下格式的简单处理以保证转换成功.css //div格式转换过程当中,有概率会使内容 ...
最新文章
- 求e的近似值java_7-78 求e的近似值 (15 分)
- 转:设置session过期时间
- Bash脚本获取自身完整路径的可靠方法
- 维特比算法—打字输入预测
- ds18b20温度传感器 lcd C语言,基于AVR单片机的18B20温度传感器及LCD显示的C语言程序设计...
- Enterprise Library 企业库 向Oracle数据库中 写日志的 存储过程
- 路遥工具箱全面迁移至 .NET 6.0 并发布 3.0 版本及迁移记录详解
- php 系统模版_原生 PHP 模板系统:Plates
- 线程的异常捕获与线程池的异常捕获
- 国内外学术期刊的一些基本常识情况--A类B类--核心期刊普刊--分区等
- php百度地图普通ip定位,使用百度地图定位IP位置
- 使用spack mirror简化离线环境的包安装
- windows11恢复ie浏览器的方法教程
- PCA降维算法的原理及应用
- Stealing packets
- linux redis 远程访问
- 清洁机器人--屏幕显示LCD方案接口说明概述
- java.util.ConcurrentModificationException when interation the list then remove
- Mooc视频字幕提取
- TF/06_Neural_Networks/01_Introduction02gate03activate fuctions
热门文章
- matlab机械臂运动,四自由度机械臂运动学分析及Matlab仿真.PDF
- 台电 平板电脑 html,匠心新旗舰 台电T20平板电脑正式发布
- 域渗透基础知识(二)之活动目录 Active Directory 的查询
- 【@required与@optional的区别 Objective-C语言】
- 浏览器 禁用 javascript 脚本 解决 网页文本内容无法复制 的问题
- 【MATLAB项目实战】:基于WOA和LSTM的化工过程故障诊断模型
- java计算机毕业设计旅游网站设计源代码+数据库+系统+lw文档
- Web系统与技术实验指导书
- 学习高数的最强APP软件 - 知能行考研数学
- 清华法学院横幅_法学院在开源法方面落后