使用 JavaScript 實作維基編輯系統
雲端維基Wiki 語法JavaScript維基編輯器GAE頁面儲存數學式繪圖訊息相關網站參考文獻最新修改簡體版English |
<html> <head> <style> h1 { font-family:標楷體, Times New Roman; font-size:24px;} h2 { font-family:標楷體, Times New Roman; font-size:20px;} pre { border:ridge 1px #888888; padding:10px; } div { border:dashed 1px #888888; padding:5px; margin:0px;} table,tr,td,th { border-collapse:collapse; } </style> <script type="text/javascript"> function show() { document.getElementById("WikiBox").style.display = "none"; document.getElementById("HtmlBox").style.display = ""; } function edit() { document.getElementById("WikiBox").style.display = ""; document.getElementById("HtmlBox").style.display = "none"; } function save() { } function wiki2html(wikiText) { init(); var text = wikiText.replace(/\r/gi, "") // g 是 global 的意思，會取代所有符合的樣式, i 會忽略大小寫。 // .replace(/\[!--/gi, '<!--') // 範例：[!-- Hidden Comment --] // .replace(/--\]/gi, '-->') // 範例：[!-- Hidden Comment --] .replace(/(http:\/\/[^\s]+)/gi, '<a href=\"$1\">$1</a>') // 範例：http://tw.yahoo.com/ .replace(/\[\[\[(\w+)\]\]\]/gi, '<a href=\"$1\">$1</a>') // 範例：[[[innerLink]]] .replace(/\[\[\[(\w+)\s*\|\s*(.*)\]\]\]/gi, '<a href=\"$1\">$2</a>') // 範例：[[[innerLink | 內部連結]]] .replace(/__(.+)__/gi, '<u>$1</u>') // 範例：__underline text__ .replace(/\*\*(.+)\*\*/gi, '<b>$1</b>') // 範例：**bold text** .replace(/--(.+)--[^\]>]/gi, '<s>$1</s>') // 範例：--strikethrough text-- , 注意，要避開 --] 或 --> .replace(/\/\/(.+)\/\//gi, '<i>$1</i>') // 範例：//italic text// .replace(/\^\^(.+)\^\^/gi, '<sup>$1</sup>') // 範例：normal^^superscript^^ .replace(/,,(.+),,/gi, '<sub>$1</sub>') // 範例：normal,,subscript,, ; // alert("text="+text); var lines = text.replace(/\r/, '').split("\n"); var html = ""; for (i in lines) { html += convertLine(lines[i]); if (inCode || inList || inTitle || inComment) html+="\n"; else html+="<BR/>"; } // alert("html="+html); return html; } var levelStack = new Array(); var inList=false, inCode=false, inTitle=false, inComment=false, inTable=false; function init() { levelStack.length = 0; inList=false; inCode=false; inTitle=false; inComment=false; } function convertLine(line) { var toLine = line; toLine = convertList(toLine); toLine = convertTable(toLine); toLine = convertTitle(toLine); toLine = convertCode(toLine); toLine = convertComment(toLine); return toLine; } function convertList(line) { var html = ""; inList = true; if (line.match(/^(\s*)([#\*])\s(.*)$/i)) { var empty = RegExp.$1; var mark = RegExp.$2; var item = RegExp.$3; var level = empty.length + 1; if (level > levelStack.length) { while (level > levelStack.length) { levelStack.push(mark); html += (mark=="#")?"<ol>":"<ul>"; } } else if (level == levelStack.length) html = ""; else if (level < levelStack.length) { while (level < levelStack.length) { var popMark = levelStack.pop(); html += (popMark=="#")?"</ol>":"</ul>"; } } return html + line.replace(/^(\s*)([#\*])\s(.*)$/i, "<li>$3</li>"); } else if (levelStack.length > 0) { while (levelStack.length > 0) { var popMark = levelStack.pop(); html += (popMark=="#")?"</ol>":"</ul>"; } } else { html = line; inList = false; } return html; } function convertTitle(line) { inTitle = true; if (line.match(/^\+{6}\s(.*)$/i)) return line.replace(/^\+{6}\s(.*)$/i, "<h6>$1</h6>"); else if (line.match(/^\+{5}\s(.*)$/i)) return line.replace(/^\+{5}\s(.*)$/i, "<h5>$1</h5>"); else if (line.match(/^\+{4}\s(.*)$/i)) return line.replace(/^\+{4}\s(.*)$/i, "<h4>$1</h4>"); else if (line.match(/^\+{3}\s(.*)$/i)) return line.replace(/^\+{3}\s(.*)$/i, "<h3>$1</h3>"); else if (line.match(/^\+{2}\s(.*)$/i)) return line.replace(/^\+{2}\s(.*)$/i, "<h2>$1</h2>"); else if (line.match(/^\+{1}\s(.*)$/i)) return line.replace(/^\+{1}\s(.*)$/i, "<h1>$1</h1>"); else { inTitle = false; return line; } } function convertTable(line) { var toLine = ""; if (line.match(/^\|\|(.*)\|\|\s*$/)) { var list = RegExp.$1.split("\|\|"); if (!inTable) { toLine += '<table border="1">'; inTable = true; } toLine += "<tr><td>"+list.join("</td><td>")+"</td></tr>"; } else { if (inTable) { toLine += "</table>"; inTable = false; } toLine += line; } return toLine; } function convertCode(line) { if (line.match(/^\[\[code(\s(.*))?\]\]\s*$/i)) { inCode = true; return line.replace(/^\[\[code(\s(.*))?\]\]\s*$/i, "<pre $1>"); } else if (line.match(/^\[\[\/code\]\]\s*$/i)) { inCode = false; return line.replace(/^\[\[\/code\]\]\s*$/i, "</pre>"); } else return line; } function convertComment(line) { if (line.match(/\[!--/i)) { inComment = true; return line.replace(/\[!--/i, "<!--"); } else if (line.match(/--]/i)) { inComment = false; return line.replace(/--]/i, "-->"); } else return line; } function convert() { var wikiText = document.getElementById("WikiBox").value; var htmlBox = document.getElementById("HtmlBox"); htmlBox.innerHTML = wiki2html(wikiText); } </script> </head> <body> <div style="text-align:right; background-color:#eeeeee; "><a href="JavaScript:show()">預覽</a> | <a href="JavaScript:edit()">編輯</a> | <a href="JavaScript:save()">儲存</a></div> <textarea id="WikiBox" style="width:100%; height:100%"> + 第 1 章 http://ccckmit.wikidot.com/ga:main //italic text// **bold text** __underline text__ //**italic and bold**// --strikethrough text-- normal^^superscript^^ normal,,subscript,, [!-- invisible comment --] [!-- invisible comment 2 --] [[[innerLink]]] [[[innerLink2]]] [[[innerLink | 內部連結]]] [[[innerLink2 | 內部連結2]]] ||~ header1 ||~ header 2 || || 1 || 2 || || cell 3 || cell 4 || [[code]] int main() { printf("Hello!"); } [[/code]] [[code type="Cpp"]] int main() { printf("Hi!"); } [[/code]] ++ 1.1 節 +++ 1.1.1 節 ++++ 1.1.1.1 節 +++++ 1.1.1.1.1 節 ++++++ 1.1.1.1.1.1 節 http://ccckmit.wikidot.com/ga:dir + 第 2 章 # item1 # item2 * item 2.1 # item 2.2 * item 2.3 # item3 # item 3.1 # item 3.2 + 第 3 章 </textarea> <div id="HtmlBox" width="100%"> </div> <script type="text/javascript"> show(); convert(); </script> </body> </html> |
page revision: 8, last edited: 07 Oct 2010 00:33
Post preview:
Close preview