DotWiki 維基系統

程式作品

C 語言

Java

C＃

JavaScript

常用函數

文字處理

遊戲程式

衛星定位

系統程式

資料結構

網路程式

自然語言

人工智慧

機率統計

資訊安全

等待完成

訊息

相關網站

參考文獻

最新修改

簡體版

English
  1. 專案下載：dotwiki1.zip (最初版)
  2. 專案下載：dotwiki2.zip (AJAX)
  3. 專案下載：dotwiki3.zip (DropBox 版)
  4. 專案下載：dotwiki4.zip (可上一頁，下一頁, 使用 jQuery.history)
  5. 專案下載：dotwiki5.zip (處理數學式)

執行範例

由於我將該系統放在 dropbox 上，請輸入下列連結到 http://dl.dropbox.com/u/13828995/dotwiki/dotwiki.htm#!as_dos 以觀看結果，其結果如下所示。

dotwikiRun.png

檔案：dotwiki.htm

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link type="text/css" rel="stylesheet" href="dotwiki.css"/>
  <SCRIPT language="JavaScript" SRC="dotwiki.js"></SCRIPT>
  <SCRIPT language="JavaScript" SRC="jquery.js"></SCRIPT>
  <script language="JavaScript" src="jquery.history.js"></script>
</head>
<body>
  <div class="menubar">
    <a href="JavaScript:show()">顯示</a> | 
    <a href="JavaScript:edit()">編輯</a> | 
    <a href="JavaScript:save()">儲存</a> | 
    <a href="JavaScript:showDebug()">除錯</a> | 
    <a href="JavaScript:login()">登入</a>
  </div>
<textarea id="debugbox" name="debugbox" style="width:95%; height:80%" class="wikitext">
debugbox
</textarea>
<textarea id="wikibox" name="wikibox" style="width:95%; height:80%" class="wikitext">
wikibox
</textarea>
<div id="htmlbox" class="wikihtml" style="width:95%; height:80%">
</div>
  <script type="text/javascript">
    var wikiPath = "";
    var attachPath = "";
 
    jQuery(document).ready(function($) { // 相當於 $(...)，但不會因找不到 $ 而失敗
        function load(page) {
            var r=new RegExp("\\#!([\\w/:\\.]+)", "gi"); 
          if (location.href.match(r)) {
               wikiPath = RegExp.$1;
            attachPath = "files/"+wikiPath.replace(/:/gi, '_');
            var sourcePath = "source/"+wikiPath.replace(/:/gi, '_')+".txt";
            // 載入 path 指定的 wiki 檔案後呼叫 show() 函數，轉為 HTML 後顯示
            $('#wikibox').load(sourcePath, show);
          }
        }
 
        $.history.init(function(page) {
                load(page == "" ? "main" : page);
            });
 
        $('a').live('click', function(e) {
                var url = $(this).attr('href');
                if (url.startsWith("#!")) {
                  url = url.replace(/^.*#/, '');
                  $.history.load(url);
                } else
                  location.href = url;
                return false;
            });
    });    
  </script>
</body>
</html>

檔案：dotwiki.js

var mathService = "http://chart.apis.google.com/chart?cht=tx&chl=";
// var mathService = "http://www.quantnet.com/cgi-bin/mathtex.cgi";
 
function hideBox() {
  document.getElementById("wikibox").style.display = "none";
  document.getElementById("htmlbox").style.display = "none";
  document.getElementById("debugbox").style.display = "none";
}
 
function showBox(name) {
  document.getElementById(name).style.display = "";
}
 
function show() {
  convert();
  hideBox();
  showBox("htmlbox");
}
 
function edit() {
  hideBox();
  showBox("wikibox");
}
 
function showDebug() {
  hideBox();
  showBox("debugbox");
}
 
function save() {
}
 
// gi 的 g 是 global 的意思，會取代所有符合的樣式, i 是 ignore 會忽略大小寫。
function wiki2html(wikiText) {
//  alert("attachPath="+attachPath);
  init();
  var text = wikiText
    .replace(/\r/gi, "") // 刪除 \r 字元
    .replace(/\[\[image\s([^\s]+)\s+size="medium"\]\]/gi, 
          '<center><img src='+attachPath+'/$1 width=512px/></center>') 
          // 範例：[[image test.jpg size="medium"]]
    .replace(/\[\[image\s([^\s\]]+)[^\]]*\]\]/gi, '<img src='+attachPath+'/$1/>') 
// 範例：[[image test.jpg]]
    .replace(/\[\[\$([^$]+)\$\]\]/gi, '<img src=\"'+mathService+'$1\">') 
// 範例：[[$ x_1 x_2 .... x_n $]]
    .replace(/\[(http:\/\/[^\s\]]+)\s+([^\]]*)\]/gi, '<a href=$1>$2</a>') 
// 範例：[http://tw.yahoo.com/ 雅虎]
    .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(/[^=\"](http:\/\/[\w;\/\?:@=#&$-_.+!*\(\),]+)/gi, '<a href=$1>$1</a>') 
    // 範例：http://tw.yahoo.com/
    .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,,
    ;
  var lines = text.replace(/\r/, '').split("\n");
  var html = "";
  for (i in lines) {
    html += convertLine(lines[i]);
    if (inCode || inList || inTitle || inComment || inTable || inMath) 
      html+="\n";
    else
      html+="<BR/>";
  }
  return html;
}
 
var levelStack = new Array();
var inList=false, inCode=false, inTitle=false, inComment=false, inTable=false, inMath=false;
 
function init() {
  levelStack.length = 0;
  inList=false; 
  inCode=false; 
  inTitle=false; 
  inComment=false;
  inTable=false;
  inMath=false;
}
 
function convertLine(line) {
  var toLine = line;
  if (line.match(/^=\s(.*)$/i)) // 置中
    return line.replace(/^=\s(.*)$/i, "<center>$1</center>");
  toLine = convertMath(toLine);
  toLine = convertList(toLine);
  toLine = convertTable(toLine);
  toLine = convertTitle(toLine);
  toLine = convertCode(toLine);
  toLine = convertComment(toLine);
  return toLine;
}
 
function convertMath(line) {
  if (line.match(/\[\[math(\s[^\]]*)?\]\]/i)) {
    inMath = true;
    return "";
  }
  else if (line.match(/\[\[\/math\]\]/i)) {
      inMath = false;
      return "";
  }
  else if (inMath) {
    var exp = line.replace(/\+/gi,'%2B').replace(/[&]/gi, '');
    return '<img src=\"'+mathService+exp+'\"><BR/>';;
  } else
    return line;
}
 
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"); 
  var htmlText = wiki2html(wikiText);
  htmlBox.innerHTML = htmlText;
  var debugbox = document.getElementById("debugbox"); 
  debugbox.innerText = htmlText;
//  alert(htmlBox.innerHTML);
}
 
function getParam(tag) {
  var eurl = location.href + "&";
  var pattern = "[\\s\\?]"+tag+"=(.*)&";
  var regex = new RegExp(pattern, "gi");
  if (regex.exec(eurl)) {
    return RegExp.$1;
  }
  else
    return "";
}

Facebook
page revision: 27, last edited: 10 Feb 2012 01:05
Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License