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

news/2024/11/22 8:45:25/

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


 


http://www.ppmy.cn/news/751203.html

相关文章

Google 总部员工终于也享受到了 “蜗居” 待遇

金融时报记者Richard Waters昨天在拜访Google山寨城总部的时候&#xff0c;拍摄到了如上图的这张诡异照片&#xff0c;一个Google员工躺在类似“蜗居”的设备里休息&#xff08;还是在看什么见不得人的东西&#xff1f;&#xff09;。Richard说当他走过这枚“蜗居”之时&#x…

探秘Google美国总部

推荐&#xff01;探秘Google美国总部 如果你在Google英文搜索中搜索“Worst Company In the World&#xff08;世界上最烂的公司&#xff09;”&#xff0c;你就会发现其结果竟然是Google和沃尔玛&#xff0c;但事实到底是怎么样呢&#xff1f;让我们一起走进Google美国总部Goo…

探秘Google中国总部

google神秘的美国总部其实被曝光的次数已经不少了&#xff0c;但是你是否了解google的中国总部是什么样子&#xff1f;请看 独家探秘google中国总部。感觉装饰和氛围比美国总部差了一截。但是跟中国同行比起来还是满有特色的。

参观腾讯北京总部记

今天特意简单写点参观随笔&#xff0c;以示踏雪留痕吧。 1&#xff09;获得中国鲁班奖的腾讯北京职场内部图。好久没去科技公司看看了&#xff0c;想起了当年老东家IBM在西北旺的环宇与钻石大厦。 2、久违的QQ&#xff0c;据说还有5~6亿的用户&#xff0c;还都是年轻用户。 3、…

[业内传闻]Google总部不满 李开复你在做什么

李开复因为深受比尔盖茨的青睐而成为中国学生的“精神教父”&#xff0c;顶着“成功学专家”和“技术天才”的光环。但现在&#xff0c;他的光环似乎黯然许多。在替Google开拓中国市场的这一年里&#xff0c;李开复经历了太多的怀疑和指责。 履新伊始&#xff0c;李开复就致力于…

国内程序员怎样竞争 Google 总部的工作机会,需要满足哪些条件?

其实单就面试难度来说&#xff0c;进Google总部比去国内大厂可能要容易很多。 不过如果是国内申请Google美国的工作&#xff0c;拿到面试机会的可能性比较小。特别是现在大环境各种变化&#xff0c;这个难度就进一步提高了。 所以国内程序员想去Google总部工作&#xff0c;一…

[多图实拍]在Google总部,工作着并享受着[z]

能在美国google总部工作一定是一种幸运&#xff0c;相信很多人都想了解位于美国加州Mountain View的Google总部是怎样的。好&#xff0c;下面我们就来用图片带你走进Google总部。 2008年3月3日&#xff0c;位于美国加州Mountain View的Google总部&#xff0c;Google工作人员的…

巨型Eclaird雕塑进驻谷歌总部

关注Android操作系统的人都会知道关于它的最新最真实的消息并不是来自某家媒体&#xff0c;而是来自谷歌位于山寨城的总部&#xff0c;每当Android更新下一款操作系统时就会出现一个新的甜品雕像。而谷歌总部最近新添置了一个甜品雕像。这就是Eclaird。 Android手机用户都知道…