近日,有同事抱怨收到的文件没有按公文要求进行排版,不得不自已动手帮他们擦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= } else { window.alert("undefined"); } </script> </body> </html>