用html+javascript打造公文一键排版系统3：获取参数设置、公文标题排版
2024-04-12 13:27:47
我们用自定义函数setDocFmt()来实现对公文的排版。
一、获取公文参数值
要对公文进行排版，首先要读取公文“参数设置”区中的参数值。比如公文要求对公文标题的一般规定是：一般用2号小标宋体字，居中显示。标题与正文中间空一行。
这些是“参数设置”中关于“文件标题”的默认设置。如果用户有特殊的要求，也可以在“参数设置”修改默认的设置。
所以我们在setDocFmt()中首先使用调用自定义函数getArg()来获取这些参数。
function getArg()
{taDbg.value += "\n--- getArg()" ;//标题字体名 font namedtfn = document.getElementById('selDocTitleFontName').value;//alert(fn);//标题字号 font sizedtfs = document.getElementById('selDocTitleFontSize').value;//alert(fs);//标题对齐方式 text aligndtta = document.getElementById('selDocTitleAlign').value;//一级标题字号 font namept1fn = document.getElementById('selPrimaryTitleFontName').value;//一级标题字号 font sizept1fs = document.getElementById('selPrimaryTitleFontSize').value;//二级标题字号 font namept2fn = document.getElementById('selSecondaryTitleFontName').value;//二级标题字号 font sizept2fs = document.getElementById('selSecondaryTitleFontSize').value;//正文字体名称mtfn = document.getElementById('selMainTextFontName').value;//正文字体字号mtfs = document.getElementById('selMainTextFontSize').value;//行距 row spacingrs = document.getElementById('tbRowSp').value;//首行行首空格数sn = document.getElementById('tbLeadSpNum').value;
} 二、公文标题排版
在获取公文参数值后，我们正式开始排版。
与“清除格式”一样，我们首先调用getClearInfoArray() 对要排版的内容进行格式清除。
然后在开始对公文标题进行排版，这主要在自定义函数setDocTitle()中完成：
function setDocTitle(s)
{taDbg.value += "\n--- setDocTitle("+ s + ");" ;return '<p style="font-family:' + dtfn + ';font-size:' + dtfs +'pt; text-align:' + dtta + '; line-height:' + rs + 'pt;">' + s;
}主要是使用<p>标签，并通过css把与标题相关的参数值作为<p>的属性。
由于标题通常与正文中间空一行，所以setDocFmt()中在setDocTitle()完成标题格式设置后，我们添加了“<p style="line-height:"' + rs +'"> ';”来实现。即：
//标题t[0] = setDocTitle(t[0]) + '</p><p style="line-height:"' + rs +'"> ';这样我们就完成了标题的排版。这里我们不考虑标题有几行的情况。
function setDocFmt()
{taDbg.value += "\n---setDocFmt()\n";getArg();var t = getClearInfoArray();//标题t[0] = setDocTitle(t[0]) + '</p><p style="line-height:"' + rs +'"> ';/*处理正文*/ edRichBody.innerHTML = t.join('</p><p>');
} 效果如下图：
完整的代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公文一键排版</title>
<meta name="author" content="purpleendurer" >
<meta name="description" content="公文一键排版">
<script type="text/javascript">
const aFontName = ["方正小标宋简体",//0"黑体",//1"微软雅黑",//2"仿宋_GB2312",//3"仿宋",//4"楷体_GB2312",//5"楷体",//6"宋体",//7"Arial",//8"Wingdings 2"//9
];//sId:select control id, iDefSel:default selected
function showFontNameSel(sId, iDefSel)
{document.write('<select id="', sId, '" width="50">');for (var i = 0; i < aFontName.length; i++){document.write('<option value="', aFontName[i], '"');document.write(i==iDefSel ? ' selected>' : '>');document.write(aFontName[i],'</option>');}document.write('</select>');
}
const aFontSize = [['初号', 42],//0['小初', 36],//1['一号', 26],//2['小一', 24],//3['二号', 22],//4['小二', 18],//5['三号', 16],//6['小三', 15],//7['四号', 14],//8['小四', 12],//9['五号', 10.5], //10['小五', 9],//11['六号', 7.5],//12['小六', 6.5],//13['七号', 5.5],//14['八号', 5]//15
];//sId:select control id, iDefSel:default selected
function showFontSizeSel(sId, iDefSel)
{document.write('<select id="', sId, '">');for (var i = 0; i < aFontSize.length; i++){document.write('<option value="',aFontSize[i][1], '"');document.write(i==iDefSel ? ' selected>' : '>');document.write(aFontSize[i][0],'</option>');}document.write('</select>');
}const aAlign = [["左对齐","left"],//0["居中对齐","center"],//1["右对齐","right"],//2["两端分散对齐","justify"]//3
];//sId:select control id, iDefSel:default selected
function showAlignSel(sId, iDefSel)
{document.write('<select id="', sId, '">');for (var i = 0; i < aAlign.length; i++){document.write('<option value="',aAlign[i][1], '"');document.write(i==iDefSel ? ' selected>' : '>');document.write(aAlign[i][0],'</option>');}document.write('</select>');
}function showSrc()
{if (btnShowSrc.value=="显示源码"){edRichBody.innerText = edRichBody.innerHTML;btnShowSrc.value = "显示预览";btnShowSrc.style.background = "cyan";}else{edRichBody.innerHTML = edRichBody.innerText;btnShowSrc.value = "显示源码";btnShowSrc.style.background = "yellow";}
}function stripPattribs(s)
{var i = s.indexOf('>');return ((-1 != i) ? s.substr(i+1) : s);
}String.prototype.stripHTML = function()
{var reTag = /<(?:.|\s)*?>/g; //var reTag = /<[^>]+>/gi; //过滤所有html标签，但不包括html标签内的内容 return this.replace(reTag,"");
}String.prototype.trim = function()
{//去除首尾空格return this.replace(/(^\s*)|(\s*$)/g, ""); /*var t = this.replace(/(^\s*)|(\s*$)/g, ""); return t =t.replace(/(^ *)|( *$)/g, ""); */
} function getClearInfoArray()
{taDbg.value += "\n---getClearInfoArray()\n";var s = edRichBody.innerHTML;var t = s.split('<p');for (var i=0; i < t.length; i++){taDbg.value += "\nt[" + i + "]=" + t[i];} while (t[0].length==0 || t[0]=='></p>'){taDbg.value += "\nshift: " + t[0];t.shift();}while (t[t.length-1].length==0 || t[t.length-1]=='></p>'){taDbg.value += "\npop: " + t[t.length-1];t.pop();}for (var i=0; i < t.length; i++){t[i] = stripPattribs(t[i]);t[i] = t[i].stripHTML();t[i] = t[i].trim(); //去除首尾空格t[i] = t[i].replace(/ /ig, ''); //去除空格代码 }while (t[t.length-1].length==0 || t[t.length-1]=='></p>'){taDbg.value += "\npop: " + t[t.length-1];t.pop();}taDbg.value += "\n---\n";for (var i=0; i < t.length; i++){taDbg.value += "\nt[" + i + "]=" + t[i];} return t;
}function clearDocFmt()
{var s = '<p>' + getClearInfoArray().join('</p><p>');edRichBody.innerHTML = s;
} function setDocTitle(s)
{taDbg.value += "\n--- setDocTitle("+ s + ");" ;return '<p style="font-family:' + dtfn + ';font-size:' + dtfs +'pt; text-align:' + dtta + '; line-height:' + rs + 'pt;">' + s;
}function getArg()
{taDbg.value += "\n--- getArg()" ;//标题字体名 font namedtfn = document.getElementById('selDocTitleFontName').value;//alert(fn);//标题字号 font sizedtfs = document.getElementById('selDocTitleFontSize').value;//alert(fs);//标题对齐方式 text aligndtta = document.getElementById('selDocTitleAlign').value;//一级标题字号 font namept1fn = document.getElementById('selPrimaryTitleFontName').value;//一级标题字号 font sizept1fs = document.getElementById('selPrimaryTitleFontSize').value;//二级标题字号 font namept2fn = document.getElementById('selSecondaryTitleFontName').value;//二级标题字号 font sizept2fs = document.getElementById('selSecondaryTitleFontSize').value;//正文字体名称mtfn = document.getElementById('selMainTextFontName').value;//正文字体字号mtfs = document.getElementById('selMainTextFontSize').value;//行距 row spacingrs = document.getElementById('tbRowSp').value;//首行行首空格数sn = document.getElementById('tbLeadSpNum').value;
} function setDocFmt()
{taDbg.value += "\n---setDocFmt()\n";getArg();var t = getClearInfoArray();//标题t[0] = setDocTitle(t[0]) + '</p><p style="line-height:"' + rs +'"> ';/*处理正文*/ edRichBody.innerHTML = t.join('</p><p>');
} </script>
</head>
<body>
<fieldset style="width: 1100px;"><legend>实时编辑区</legend>
<!--
<iframe id="editor" width="600px" height="200px" style="border: solid 1px;" src="http://nyncj.hechi.gov.cn"></iframe>
//-->
<iframe id="editor" width="1200px" height="400px" style="border: solid 1px;"></iframe>
</fieldset>
<p><input type="button" id="btnclearDocFmt" value="清除格式" onclick="clearDocFmt()" /><input type="button" id="btnsetDocFmt" value="一键排版" onclick="setDocFmt()" /><input type="button" id="btnShowSrc" value="显示源码" onclick="showSrc()" style="background:yellow; border-radius: 25px;" /><input type="button" id="btnB" value="B" title="加粗/正常" style="font-weight:bolder" onclick="execCmd('bold',false,null)" /><input type="button" id="btnItalic" value="I" title="斜体/正常" style="font-weight:bolder;font-style:italic" onclick="execCmd('italic',false,null)" />
</p>
<fieldset style="width: 1200px;"><legend>参数设置</legend><p>文件标题：<script>showFontNameSel("selDocTitleFontName", 0);document.write(' ');showFontSizeSel("selDocTitleFontSize", 4);document.write(' ');showAlignSel("selDocTitleAlign", 1);</script><p>一级标题：<script>showFontNameSel("selPrimaryTitleFontName", 1);document.write(' ');showFontSizeSel("selPrimaryTitleFontSize", 6);</script></p><p>二级标题：<script>showFontNameSel("selSecondaryTitleFontName", 5);document.write(' ');showFontSizeSel("selSecondaryTitleFontSize", 6);</script><input type="checkbox" checked id="cbSecondaryTitleString">粗体</p><p>三级标题：<input type="checkbox" checked id="cbThirdTitleString">粗体</p><p>正文字体： <script>showFontNameSel("selMainTextFontName", 3);document.write(' ');showFontSizeSel("selMainTextFontSize", 6);document.write(' ');</script>行距（行间距）：<input type="text" id="tbRowSp" value="28" size="2"><!-- row spacing//--> 段落首行行首空格数：<input type="text" id="tbLeadSpNum" value="2" size="2"></P></fieldset>
<p>调试信息</p>
<textarea id="taDbg" style="width: 1225px; height: 200px">调试信息</textarea>
<script type="text/javascript">
const edRich = document.getElementById("editor");
const taDbg = document.getElementById("taDbg");
const btnShowSrc = document.getElementById("btnShowSrc");
//一级标题字号 font name
var pt1fn = document.getElementById('selPrimaryTitleFontName').value;
//一级标题字号 font size
var pt1fs = document.getElementById('selPrimaryTitleFontSize').value;
//alert(fs);
//行距 row spacingvar rs = document.getElementById('tbRowSp').value;
//首行行首空格数var sn = document.getElementById('tbLeadSpNum').value;
// (iframe.contentDocument||iframe.contentWindow.document).body.innerHTML
var edRichDoc;
var edRichBody;
if (typeof(edRich) !="undefined"){edRichDoc = edRich.contentWindow.document;edRichDoc.designMode = "on";edRichDoc.contentEditable = true;edRichBody = edRichDoc.body;edRichBody.innerHTML = '<p><a href="http://blog.csdn.net/purpleendurer">http://blog.csdn.net/purpleendurer</a></p><p></p><p class="MsoNormal"><p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US" style="font-family:黑体">SQL</span><span style="font-family:黑体">注入基础<span lang="EN-US"><o:p></o:p></span></span></p><p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p><p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span style="font-family:黑体">一、<span lang="EN-US">SQL</span>注入分类<span lang="EN-US"><o:p></o:p></span></span></p><p class="MsoNormal" style="text-indent:21.1pt;mso-char-indent-count:2.0"><b style="mso-bidi-font-weight:normal"><span style="font-family:楷体">（一）什么是<span lang="EN-US">SQL</span>注入<span lang="EN-US">?<o:p></o:p></span></span></b></p><p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span lang="EN-US">SLQ</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入</span><span lang="EN-US">(</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">英文</span><span lang="EN-US">: Sqlinject)</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">：当</span><span lang="EN-US">web</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">应用向后台数据库传递</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">语句进行数据库操作时，如果对用户输入的参数没有经过严格的过滤，那么用户可以构造特殊的</span><span lang="EN-US">sq1</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">语句，从而带入到数据库中执行，获取或修改数据库中的数据。</span><span lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0"><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">例如很多影视网站泄露</span><span lang="EN-US">VIP</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">会员密码大多就是通过</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入漏洞暴露的，这类网站特别容易受到</span><span lang="EN-US">SQL</span><span style="font-family:宋体;mso-ascii-font-family:Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font:minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin">注入攻击。</span><span lang="EN-US"><o:p></o:p></span></p><br></p>';
}
else
{window.alert("undefined");
}
</script>
</body>
</html>
用html+javascript打造公文一键排版系统3：获取参数设置、公文标题排版相关推荐
- 打造F11一键恢复系统
系统崩溃无需重装 F11一键恢复系统(1) 对于电脑用户来说,最头疼的问题莫过于系统崩溃后重装系统.虽然现在有形形色色的各种系统恢复工具,如品牌机自带的的系统恢复盘等等,但是都存在一个缺点,需 ...
- android系统属性获取及设置
系统属性获取及设置中的设置值 data/data/com.android.providers.settings/databases/settings.db 1.系统属性获取及设置 android.os ...
- ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
- 前端学习（1966）vue之电商管理系统电商系统之获取参数列表
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- 用html+javascript打造公文一键排版系统1：设计界面
近日,有同事抱怨收到的文件没有按公文要求进行排版,不得不自已动手帮他们擦PP排版,感慨每天都在做这些无意义的事情,浪费生命! 于是打算用用html+javascript打造公文一键排版系统. 首先是设 ...
- 打造IBM 的F11一键恢复系统
提示:此操作有一定风险,请菜鸟谨慎使用.实施前备份好自己硬盘的数据! 对于电脑用户来说,最头疼的问题莫过于系统崩溃后重装系统.虽然现在有形形色色的各种系统恢复工具,如品牌机自带的的系统恢复盘等等,但是 ...
- 一键重装系统可靠吗？快启动一键重装怎么样？
一键重装系统可靠吗?一键重装系统得到许多小白的青睐,但是很多小白许多一键重装却出现失败或者黑屏的现象,这主要原因之一是市面上的某些一键重装工具或者不够成功,原因之二是小白对装机机制不够了解,也不懂怎么 ...
- 将100本英文书名做字典排序 c语言,C语言课程设计一种简单的英文词典排版系统c.doc...
C语言课程设计一种简单的英文词典排版系统c 英文摘要中国地质大学(武汉)C语言课程设计学 院:机电学院 专 业:通信工程 题 目:一种简单的英文词典排版系统 班 级:075094 姓 名: 学 号: ...
- 用html+javascript打造公文一键排版系统6：三级标题排版
正文中的标题分为四级,文中结构层次序数依次可以用"一.""(一)""1.""(1)"标注:一般第一层用黑体字.第二层用楷 ...
最新文章
- EditPlus集成Java编译和运行命令组建轻量级Java SE开发工具
- 大数据推荐（个性化推荐）
- 独家 | 深度学习 V.S. 谜题游戏
- consul使用的一些见解
- 如何设置顶部和底部固定，中间填满
- Boost学习笔记-智能指针
- 关于计算机网络的未来综述,计算机网络综述
- java源码阅读Object
- Kafka 与Spark的集成
- 3.4.2 - Operators 3.4.3 division and truncation
- listview选中高亮
- php filtervar函数用法,PHP过滤器 filter_has_var() 函数用法实例分析
- centos 程序 mysql数据库文件位置_Centos mysql数据库存放位置更换
- linux中启动与终止lnmp的脚本
- PHPwamp开发环境搭建详解
- 500MHz频率源设计(西电通院高频大作业)
- 【图神经网络】图神经网络(GNN)学习笔记：GraphSAGE
- 检察院计算机知识试卷,2014河南检察院考试备考：计算机专业课试题练习
- 暴躁算法（剑指系列）-每日一练
- Ubuntu 永久修改DNS