用html+javascript打造公文一键排版系统2：显示源码/显示预览、清除格式-阿里云开发者社区

我们从实现最简单、最基本的功能开始。

一、显示源码/显示预览

我们通过btnShowSrc来实现示源码/显示预览功能，根据btnShowSrc.value来判断<iframe>的显示的内容并切换。

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";
  }
}

二、清除格式

我们要处理的公文可能是从word等文字处理程序复制过来的，本身带有一些格式，比如：

SQL注入基础

一、SQL注入分类

（一）什么是SQL注入?

SLQ注入(英文: Sqlinject)：当web应用向后台数据库传递SQL语句进行数据库操作时，如果对用户输入的参数没有经过严格的过滤，那么用户可以构造特殊的sq1语句，从而带入到数据库中执行，获取或修改数据库中的数据。

例如很多影视网站泄露VIP会员密码大多就是通过SQL注入漏洞暴露的，这类网站特别容易受到SQL注入攻击。

其源码是这样的：

SQL注入基础<o:p></o:p>

<o:p> </o:p>

一、SQL注入分类<o:p></o:p>

（一）什么是SQL注入?<o:p></o:p>

SLQ<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 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">英文: Sqlinject)<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">：当web<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">应用向后台数据库传递SQL<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">语句进行数据库操作时，如果对用户输入的参数没有经过严格的过滤，那么用户可以构造特殊的sq1<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">语句，从而带入到数据库中执行，获取或修改数据库中的数据。<o:p></o:p>

<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">例如很多影视网站泄露VIP<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">会员密码大多就是通过SQL<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">注入漏洞暴露的，这类网站特别容易受到SQL<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">注入攻击。<o:p></o:p>

这些格式将影响排版的效果，所以我们用“清除格式”按钮调用自定义函数clearDocFmt()来清除这些格式。

我们需要先保留公文的分段信息，在html代码中分段一般是通过这一对标签来定义的，所以我们要保留这个标签的信息，但是中一般还带有属性：

所以我们不能直接使用，而是用“<p”。

先用字符串的split方法按'<p'将公文内容按段分解成一个数组，然后逐段进行处理：

1.用数组shift方法移除公文首部多余的空行

2.用数组的pop方法移除公文尾部多余的空行

3.用自定义函数stripPattribs移除标签的相关属性。

4.用正则表达式为字符串对象构造stripHTML方法去除多余的html代码

5.用正则表达式为字符串对象构造trim方法去除首尾两端的多余空格

6.用replace方法去除 表示的空格

7.再次用数组的pop方法移除公文尾部多余的空行

8.利用数组的join()方法把处理好的各段信息连接起来。

相关代码如下：

function getClearInfoArray()
{
  var s = edRichBody.innerHTML;
  var t = s.split('<p');

  taDbg.value += "\n---getClearInfoArray()\n";
  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(/ /ig, ''); //去除空格代码     
  }

  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;
}

代码运行的效果如下图：

完整的代码如下：

<!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(/(^ *)|( *$)/g, ""); */
} 

function getClearInfoArray()
{
  var s = edRichBody.innerHTML;
  var t = s.split('<p');

  taDbg.value += "\n---getClearInfoArray()\n";
  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(/ /ig, ''); //去除空格代码     
  }

  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;
}    

</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 = '<p><a href=""></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> </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>

用html+javascript打造公文一键排版系统2：显示源码/显示预览、清除格式

热门文章

最新文章

相关课程

相关电子书

相关实验场景