我們從實現(xiàn)最簡單、最基本的功能開始。
一、顯示源碼/顯示預(yù)覽
我們通過btnShowSrc來實現(xiàn)示源碼/顯示預(yù)覽功能,根據(jù)btnShowSrc.value來判斷<iframe>的顯示的內(nèi)容并切換。
<iframe>默認(rèn)為顯示預(yù)覽,所以btnShowSrc.value值為“顯示源碼”,點擊它后,<iframe>就顯示源碼,并將按鈕的value改為“顯示預(yù)覽” 。代碼如下:
function showSrc()
{
if (btnShowSrc.value=="顯示源碼")
{
edRichBody.innerText = edRichBody.innerHTML;
btnShowSrc.value = "顯示預(yù)覽";
btnShowSrc.style.background = "cyan";
}
else
{
edRichBody.innerHTML = edRichBody.innerText;
btnShowSrc.value = "顯示源碼";
btnShowSrc.style.background = "yellow";
}
}
二、清除格式
我們要處理的公文可能是從word等文字處理程序復(fù)制過來的,本身帶有一些格式,比如:
SQL注入基礎(chǔ)
一、SQL注入分類
?。ㄒ唬┦裁词荢QL注入?
SLQ注入(英文: Sqlinject):當(dāng)web應(yīng)用向后臺數(shù)據(jù)庫傳遞SQL語句進(jìn)行數(shù)據(jù)庫操作時,如果對用戶輸入的參數(shù)沒有經(jīng)過嚴(yán)格的過濾,那么用戶可以構(gòu)造特殊的sq1語句,從而帶入到數(shù)據(jù)庫中執(zhí)行,獲取或修改數(shù)據(jù)庫中的數(shù)據(jù)。
例如很多影視網(wǎng)站泄露VIP會員密碼大多就是通過SQL注入漏洞暴露的,這類網(wǎng)站特別容易受到SQL注入攻擊。
其源碼是這樣的:
<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:黑體">注入基礎(chǔ)<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">:當(dāng)</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">應(yīng)用向后臺數(shù)據(jù)庫傳遞</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">語句進(jìn)行數(shù)據(jù)庫操作時,如果對用戶輸入的參數(shù)沒有經(jīng)過嚴(yán)格的過濾,那么用戶可以構(gòu)造特殊的</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">語句,從而帶入到數(shù)據(jù)庫中執(zhí)行,獲取或修改數(shù)據(jù)庫中的數(shù)據(jù)。</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">例如很多影視網(wǎng)站泄露</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">注入漏洞暴露的,這類網(wǎng)站特別容易受到</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>
這些格式將影響排版的效果,所以我們用“清除格式”按鈕調(diào)用自定義函數(shù)clearDocFmt()來清除這些格式。
我們需要先保留公文的分段信息,在html代碼中分段一般是通過<p></p>這一對標(biāo)簽來定義的,所以我們要保留<P>這個標(biāo)簽的信息,但是<P>中一般還帶有屬性:
<p class="MsoNormal" style="text-indent:21.0pt;mso-char-indent-count:2.0">
所以我們不能直接使用<p>,而是用“<p”。
先用字符串的split方法按'<p'將公文內(nèi)容按段分解成一個數(shù)組,然后逐段進(jìn)行處理:
1.用數(shù)組shift方法移除公文首部多余的空行
2.用數(shù)組的pop方法移除公文尾部多余的空行
3.用自定義函數(shù)stripPattribs移除<p>標(biāo)簽的相關(guān)屬性。
4.用正則表達(dá)式為字符串對象構(gòu)造stripHTML方法去除多余的html代碼
5.用正則表達(dá)式為字符串對象構(gòu)造trim方法去除首尾兩端的多余空格
6.用replace方法去除 表示的空格
7.再次用數(shù)組的pop方法移除公文尾部多余的空行
8.利用數(shù)組的join()方法把處理好的各段信息連接起來。
相關(guān)代碼如下:
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;
}
代碼運行的效果如下圖:
文章來源:http://www.zghlxwxcb.cn/news/detail-547803.html
完整的代碼如下:文章來源地址http://www.zghlxwxcb.cn/news/detail-547803.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 = [
"方正小標(biāo)宋簡體",//0
"黑體",//1
"微軟雅黑",//2
"仿宋_GB2312",//3
"仿宋",//4
"楷體_GB2312",//5
"楷體",//6
"宋體",//7
"Arial",//8
"Wingdings 2"http://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 = "顯示預(yù)覽";
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標(biāo)簽,但不包括html標(biāo)簽內(nèi)的內(nèi)容
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>實時編輯區(qū)</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>參數(shù)設(shè)置</legend>
<p>文件標(biāo)題:
<script>
showFontNameSel("selDocTitleFontName", 0);
document.write(' ');
showFontSizeSel("selDocTitleFontSize", 4);
document.write(' ');
showAlignSel("selDocTitleAlign", 1);
</script>
<p>一級標(biāo)題:
<script>
showFontNameSel("selPrimaryTitleFontName", 1);
document.write(' ');
showFontSizeSel("selPrimaryTitleFontSize", 6);
</script>
</p>
<p>二級標(biāo)題:
<script>
showFontNameSel("selSecondaryTitleFontName", 5);
document.write(' ');
showFontSizeSel("selSecondaryTitleFontSize", 6);
</script>
<input type="checkbox" checked id="cbSecondaryTitleString">粗體
</p>
<p>三級標(biāo)題:
<input type="checkbox" checked id="cbThirdTitleString">粗體
</p>
<p>行距(行間距):<input type="text" id="tbRowSp" value="28" size="2"><!-- row spacing//--> 段落首行行首空格數(shù):<input type="text" id="tbLeadSpNum" value="2" size="2">
</P>
</fieldset>
<p>調(diào)試信息</p>
<textarea id="taDbg" style="width: 1225px; height: 200px">調(diào)試信息</textarea>
<script type="text/javascript">
const edRich = document.getElementById("editor");
const taDbg = document.getElementById("taDbg");
const btnShowSrc = document.getElementById("btnShowSrc");
//一級標(biāo)題字號 font name
var pt1fn = document.getElementById('selPrimaryTitleFontName').value;
//一級標(biāo)題字號 font size
var pt1fs = document.getElementById('selPrimaryTitleFontSize').value;
//alert(fs);
//行距 row spacing
var rs = document.getElementById('tbRowSp').value;
//首行行首空格數(shù)
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 >http://blog.csdn.net/purpleendurer</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:黑體">注入基礎(chǔ)<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">:當(dāng)</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">應(yīng)用向后臺數(shù)據(jù)庫傳遞</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">語句進(jìn)行數(shù)據(jù)庫操作時,如果對用戶輸入的參數(shù)沒有經(jīng)過嚴(yán)格的過濾,那么用戶可以構(gòu)造特殊的</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">語句,從而帶入到數(shù)據(jù)庫中執(zhí)行,獲取或修改數(shù)據(jù)庫中的數(shù)據(jù)。</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">例如很多影視網(wǎng)站泄露</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">注入漏洞暴露的,這類網(wǎng)站特別容易受到</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>
到了這里,關(guān)于用html+javascript打造公文一鍵排版系統(tǒng)2:顯示源碼/顯示預(yù)覽、清除格式的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!