近日，有同事抱怨收到的文件没有按公文要求进行排版，不得不自已动手帮他们擦PP排版，感慨每天都在做这些无意义的事情，浪费生命！
于是打算用用html+javascript打造公文一键排版系统。
首先是设置界面，主要包括四个部分：
一、实时编辑区。
用做一个所见即所得文本编辑框。</p> <p><span style="color:#956fe7;"><strong>二、功能按钮。</strong></span></p> <p>暂时提供五个按钮，分别提供“清除格式”、“一键排版”、“显示源码”、设置字体“加粗/正常”和“斜体/正常”功能。</p> <p><span style="color:#956fe7;"><strong>三、公文参数设置区。</strong></span></p> <p>公文要求一般是：</p> <p>1.公文标题：一般用2号小标宋体字。</p> <p>2.正文：一般用3号仿宋体字，编排于主送机关名称下一行，每个自然段左空二字，回行顶格。<br> 正文中的标题分为四级，文中结构层次序数依次可以用“一、”“（一）”“1.”“（1）”标注；一般第一层用黑体字、第二层用楷体字加粗、第三层和第四层用仿宋体字标注。</p> <p>3.行间距：一般是28磅。</p> <p>因此，对于公文标题，提供字体选择框（ListBox， 默认值“方正小标宋简体”）、字号选择框（ListBox，默认值二号）、对齐方式选择框（ListBox，默认值居中对齐）。</p> <p>对于一级标题，提供字体选择框（ListBox，默认值“黑体”）、字号（ListBox，默认值dg 号）。</p> <p>对于二级标题，提供字体选择框（ListBox，默认值“楷体_GB2312”）、字号（ListBox，默认值三 号），加粗钩选框（checkbox，默认钩选）。</p> <p>对于三级标题，提供加粗钩选框（checkbox，默认钩选）。</p> <p>对于正文，提供了两个选项：行间距文本框（textbox，默认值28）、段落首行行首空格数文本框：（textbox，默认值2）。</p> <p><span style="color:#956fe7;"><strong>四、调试信息区。</strong></span></p> <p>用<textarea>显示调试信息。</p> <p>具体如下：</p> <p><a href="http://img.e-com-net.com/image/info8/b062371955f240af8c701bfe5e6a1743.jpg" target="_blank"><img alt="用html+javascript打造公文一键排版系统1：设计界面_第1张图片" height="506" src="http://img.e-com-net.com/image/info8/b062371955f240af8c701bfe5e6a1743.jpg" width="650" style="border:1px solid black;"></a></p> <p> 相应代码：</p> <pre><code class="language-html"><!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"> //-->
文件标题：
一级标题：
二级标题： 粗体
三级标题： 粗体
行距（行间距）： 段落首行行首空格数：
调试信息
