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

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License