用html+javascript打造公文一键排版系统1：设计界面

紫郢剑侠

已于 2023-08-05 08:39:32 修改

阅读量952

点赞数 1

分类专栏：原创作品公文一键排版 JavaScript 文章标签： html javascript 前端公文

于 2023-07-06 19:23:24 首次发布

本文链接：https://blog.csdn.net/Purpleendurer/article/details/131583354

版权

原创作品同时被 3 个专栏收录

272 篇文章 1 订阅

订阅专栏

JavaScript

36 篇文章 0 订阅

订阅专栏

公文一键排版

16 篇文章 0 订阅

订阅专栏

近日，有同事抱怨收到的文件没有按公文要求进行排版，不得不自已动手帮他们擦PP排版，感慨每天都在做这些无意义的事情，浪费生命！

于是打算用用html+javascript打造公文一键排版系统。

首先是设置界面，主要包括四个部分：

一、实时编辑区。

用<iframe>做一个所见即所得文本编辑框。

二、功能按钮。

暂时提供五个按钮，分别提供“清除格式”、“一键排版”、“显示源码”、设置字体“加粗/正常”和“斜体/正常”功能。

三、公文参数设置区。

公文要求一般是：

1.公文标题：一般用2号小标宋体字。

2.正文：一般用3号仿宋体字，编排于主送机关名称下一行，每个自然段左空二字，回行顶格。
正文中的标题分为四级，文中结构层次序数依次可以用“一、”“（一）”“1.”“（1）”标注；一般第一层用黑体字、第二层用楷体字加粗、第三层和第四层用仿宋体字标注。

3.行间距：一般是28磅。

因此，对于公文标题，提供字体选择框（ListBox，默认值“方正小标宋简体”）、字号选择框（ListBox，默认值二号）、对齐方式选择框（ListBox，默认值居中对齐）。

对于一级标题，提供字体选择框（ListBox，默认值“黑体”）、字号（ListBox，默认值dg 号）。

对于二级标题，提供字体选择框（ListBox，默认值“楷体_GB2312”）、字号（ListBox，默认值三号），加粗钩选框（checkbox，默认钩选）。

对于三级标题，提供加粗钩选框（checkbox，默认钩选）。

对于正文，提供了两个选项：行间距文本框（textbox，默认值28）、段落首行行首空格数文本框：（textbox，默认值2）。

四、调试信息区。

用<textarea>显示调试信息。

具体如下：

相应代码：

<!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>');
}
</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>行距（行间距）：<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 = '<a href="http://blog.csdn.net/purpleendurer">http://blog.csdn.net/purpleendurer</a>';
}
else
{
	window.alert("undefined");
}
</script>
</body>
</html>

紫郢剑侠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
用html+javascript打造公文一键排版系统1：设计界面

近日，有同事抱怨收到的文件没有按公文要求进行排版，不得不自已动手帮他们擦PP排版，感慨每天都在做这些无意义的事情，浪费生命！于是打算用用html+javascript打造公文一键排版系统。首先是设置界面，主要包括四个部分：
复制链接

扫一扫