用html+javascript打造公文一键排版系统3：获取参数设置、公文标题排版

已于 2023-08-05 08:36:27 修改
阅读量926 收藏 2
点赞数
分类专栏： 原创作品 JavaScript 公文一键排版 文章标签： html javascript 前端 正则表达式 css 公文排版
于 2023-07-10 23:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Purpleendurer/article/details/131645929
版权

我们用自定义函数setDocFmt()来实现对公文的排版。

一、获取公文参数值

要对公文进行排版，首先要读取公文“参数设置”区中的参数值。比如公文要求对公文标题的一般规定是：一般用2号小标宋体字，居中显示。标题与正文中间空一行。
这些是“参数设置”中关于“文件标题”的默认设置。如果用户有特殊的要求，也可以在“参数设置”修改默认的设置。

所以我们在setDocFmt()中首先使用调用自定义函数getArg()来获取这些参数。

function getArg()
{
	taDbg.value += "\n--- getArg()" ;

	//标题字体名 font name
	dtfn = document.getElementById('selDocTitleFontName').value;
	//alert(fn);
	//标题字号 font size
	dtfs = document.getElementById('selDocTitleFontSize').value;
	//alert(fs);
	//标题对齐方式 text align
	dtta = document.getElementById('selDocTitleAlign').value;

	//一级标题字号 font name
	pt1fn = document.getElementById('selPrimaryTitleFontName').value;
	//一级标题字号 font size
	pt1fs = document.getElementById('selPrimaryTitleFontSize').value;

	//二级标题字号 font name
	pt2fn = document.getElementById('selSecondaryTitleFontName').value;
	//二级标题字号 font size
	pt2fs = document.getElementById('selSecondaryTitleFontSize').value;

	//正文字体名称
	mtfn = document.getElementById('selMainTextFontName').value;
	//正文字体字号
	mtfs = document.getElementById('selMainTextFontSize').value;
	//行距 row spacing
	rs  = 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 +'">&nbsp;';”来实现。即：

	//标题
	t[0]  = setDocTitle(t[0]) + '</p><p style="line-height:"' + rs +'">&nbsp;';

这样我们就完成了标题的排版。这里我们不考虑标题有几行的情况。

function setDocFmt()
{
	taDbg.value += "\n---setDocFmt()\n";

	getArg();

	var t = getClearInfoArray();

	//标题
	t[0]  = setDocTitle(t[0]) + '</p><p style="line-height:"' + rs +'">&nbsp;';

	/*处理正文*/	

	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(/(^&nbsp;*)|(&nbsp*$)/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(/&nbsp;/ig, ''); //去除空格代码	  &nbsp;
	}
 
	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 name
	dtfn = document.getElementById('selDocTitleFontName').value;
	//alert(fn);
	//标题字号 font size
	dtfs = document.getElementById('selDocTitleFontSize').value;
	//alert(fs);
	//标题对齐方式 text align
	dtta = document.getElementById('selDocTitleAlign').value;

	//一级标题字号 font name
	pt1fn = document.getElementById('selPrimaryTitleFontName').value;
	//一级标题字号 font size
	pt1fs = document.getElementById('selPrimaryTitleFontSize').value;

	//二级标题字号 font name
	pt2fn = document.getElementById('selSecondaryTitleFontName').value;
	//二级标题字号 font size
	pt2fs = document.getElementById('selSecondaryTitleFontSize').value;

	//正文字体名称
	mtfn = document.getElementById('selMainTextFontName').value;
	//正文字体字号
	mtfs = document.getElementById('selMainTextFontSize').value;
	//行距 row spacing
	rs  = 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 +'">&nbsp;';

	/*处理正文*/	

	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 spacing
 var 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>&nbsp;</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>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫郢剑侠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值