// //''Name:'' Calendar plugin\n// //''Version:'' <<getversion calendar>> (<<getversiondate calendar "DD MMM YYYY">>)\n// //''Author:'' SteveRumsby\n\n// //''Syntax:'' \n// //{{{<<calendar>>}}} or {{{<< calendar //year// >>}}} or {{{<< calendar //year month// >>}}} or {{{<< calendar thismonth >>}}}\n\n// //''Description:'' \n// //The first form produces an full-year calendar for the current year. The second produces a full-year calendar for the given year. The third produces a single month calendar for the given month and year. The fourth form produces a single month calendar for the current month.\n// // Weekends and holidays are highlighted (see below for how to specify holdays).\n\n// //''Todo:''\n// //* Improve the formatting, especially when included in MainMenu\n// //* Find a better way of specifying holidays. It would be good to support calculated dates (e.g. Easter), and dates for different countries.\n// //* Add browsing facilities like jscalendar has\n// //* Highlight "today", if visible...\n// //* Integrate with the ReminderMacros\n\n// //''Configuration:''\n// //Modify this section to change the text displayed for the month and day names, to a different language for example. You can also change the format of the tiddler names linked to from each date, and the colours used.\n{{{\nconfig.macros.calendar = {};\n\nconfig.macros.calendar.monthnames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];\nconfig.macros.calendar.daynames = ["M", "T", "W", "T", "F", "S", "S"];\n\nconfig.macros.calendar.weekendbg = "#c0c0c0";\nconfig.macros.calendar.monthbg = "#e0e0e0";\nconfig.macros.calendar.holidaybg = "#ffc0c0";\n\n// //''Code section:''\n// (you should not need to alter anything below here)//\n\nconfig.macros.calendar.tiddlerformat = "YYYY MM DD"; // This used to be changeable - for now, it isn't// <<smiley :-(>> \n\nversion.extensions.calendar = { major: 0, minor: 2, revision: 0, date: new Date(2005, 07, 21)};\nconfig.macros.calendar.monthdays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n\nconfig.macros.calendar.holidays = [ "01/01", "25/12", "03/01/2005", "02/05/2005", "30/05/2005", "29/08/2005" ];\n\nfunction calendarIsHoliday(date)\n{\n var longHoliday = date.formatString("0DD/0MM/YYYY");\n var shortHoliday = date.formatString("0DD/0MM");\n\n for(var i = 0; i < config.macros.calendar.holidays.length; i++) {\n if(config.macros.calendar.holidays[i] == longHoliday || config.macros.calendar.holidays[i] == shortHoliday) {\n return true;\n }\n }\n return false;\n}\n\nconfig.macros.calendar.handler = function(place,macroName,params)\n{\n var calendar = createTiddlyElement(place, "table", null, "calendar", null);\n\n if(params[0] == "thismonth") {\n var today = new Date();\n createCalendarOneMonth(calendar, today.getYear()+1900, today.getMonth());\n } else {\n var year;\n if(params[0]) {\n year = params[0];\n } else {\n year = (new Date()).getYear() + 1900;\n }\n\n if(params[1]) {\n var month = params[1] -1;\n createCalendarOneMonth(calendar, year, month);\n } else {\n createCalendarYear(calendar, year);\n }\n }\n}\n\nfunction createCalendarOneMonth(calendar, year, mon)\n{\n var row = createTiddlyElement(calendar, "tr", null, null, null);\n createCalendarMonthHeader(row, config.macros.calendar.monthnames[mon] + " " + year, true);\n row = createTiddlyElement(calendar, "tr", null, null, null);\n createCalendarDayHeader(row, 1);\n createCalendarDayRowsSingle(calendar, year, mon);\n}\n\n\nfunction createCalendarMonth(calendar, year, mon)\n{\n var row = createTiddlyElement(calendar, "tr", null, null, null);\n createCalendarMonthHeader(row, config.macros.calendar.monthnames[mon] + " " + year, false);\n row = createTiddlyElement(calendar, "tr", null, null, null);\n createCalendarDayHeader(row, 1);\n createCalendarDayRowsSingle(calendar, year, mon);\n}\n\nfunction createCalendarYear(calendar, year)\n{\n var row;\n\n row = createTiddlyElement(calendar, "tr", null, null, null);\n var yearHeader = createTiddlyElement(row, "td", null, "calendarYear", year);\n yearHeader.align = "center";\n yearHeader.setAttribute("colSpan", 21);\n\n createCalendarMonthRow(calendar, year, 0);\n createCalendarMonthRow(calendar, year, 3);\n createCalendarMonthRow(calendar, year, 6);\n createCalendarMonthRow(calendar, year, 9);\n}\n\nfunction createCalendarMonthRow(cal, year, mon)\n{\n var row = createTiddlyElement(cal, "tr", null, null, null);\n createCalendarMonthHeader(row, config.macros.calendar.monthnames[mon]);\n createCalendarMonthHeader(row, config.macros.calendar.monthnames[mon+1]);\n createCalendarMonthHeader(row, config.macros.calendar.monthnames[mon+2]);\n row = createTiddlyElement(cal, "tr", null, null, null);\n createCalendarDayHeader(row, 3);\n createCalendarDayRows(cal, year, mon);\n}\n\nfunction createCalendarMonthHeader(row, name, nav)\n{\n var month;\n if(nav) {\n var back = createTiddlyElement(row, "td", null, null, null);\n createTiddlyButton(back, "<", "Back", onClickCalendarBack)\n back.align = "center";\n back.style.background = config.macros.calendar.monthbg; \n month = createTiddlyElement(row, "td", null, "calendarMonthname", name)\n month.setAttribute("colSpan", 5);\n var fwd = createTiddlyElement(row, "td", null, null, null);\n createTiddlyButton(fwd, ">", "Fwd", onClickCalendarFwd)\n fwd.align = "center";\n fwd.style.background = config.macros.calendar.monthbg; \n } else {\n month = createTiddlyElement(row, "td", null, "calendarMonthname", name)\n month.setAttribute("colSpan", 7);\n }\n month.align = "center";\n month.style.background = config.macros.calendar.monthbg;\n}\n\nfunction onClickCalendarBack(e)\n{\n\n}\n\nfunction onClickCalendarFwd(e)\n{\n\n}\n\nfunction createCalendarDayHeader(row, num)\n{\n var cell;\n for(var i = 0; i < num; i++) {\n for(var j = 0; j < 7; j++) {\n cell = createTiddlyElement(row, "td", null, null, config.macros.calendar.daynames[j]);\n if(j > 4) cell.style.background = config.macros.calendar.weekendbg;\n }\n }\n}\n\nfunction createCalendarDays(row, col, first, max, year, mon)\n{\n var i;\n for(i = 0; i < col; i++) {\n createTiddlyElement(row, "td", null, null, null);\n }\n var day = first;\n for(i = col; i < 7; i++) {\n var daycell = createTiddlyElement(row, "td", null, null, null);\n if(i > 4) daycell.style.background = config.macros.calendar.weekendbg;\n if(day > 0 && day <= max) {\n var celldate = new Date(year, mon, day);\n var title = celldate.formatString(config.macros.calendar.tiddlerformat);\n if(calendarIsHoliday(celldate)) {\n daycell.style.background = config.macros.calendar.holidaybg;\n }\n if(window.findTiddlersWithReminders == null) {\n var link = createTiddlyLink(daycell, title, false);\n link.appendChild(document.createTextNode(day));\n } else {\n var button = createTiddlyButton(daycell, day, title, onClickCalendarDate);\n }\n }\n day++;\n }\n}\n\n// //We've clicked on a day in a calendar - create a suitable pop-up of options.\n// //The pop-up should contain:\n// // * a link to create a new entry for that date\n// // * a link to create a new reminder for that date\n// // * an <hr>\n// // * the list of reminders for that date\nfunction onClickCalendarDate(e)\n{\n var button = this;\n var date = button.getAttribute("title");\n var dat = new Date(date.substr(6,4), date.substr(3,2)-1, date.substr(0, 2));\n\n date = dat.formatString(config.macros.calendar.tiddlerformat);\n var popup = createTiddlerPopup(this);\n popup.appendChild(document.createTextNode(date));\n var newReminder = function() {\n var t = store.tiddlers[date];\n displayTiddler(null, date, 2, null, null, false, false);\n if(t) {\n document.getElementById("editorBody" + date).value += "\sn<<reminder day:" + dat.getDate() +\n " month:" + (dat.getMonth()+1) +\n " year:" + (dat.getYear()+1900) + " title: >>";\n } else {\n document.getElementById("editorBody" + date).value = "<<reminder day:" + dat.getDate() +\n " month:" + (dat.getMonth()+1) +\n " year:" + (dat.getYear()+1900) + " title: >>";\n }\n };\n var link = createTiddlyButton(popup, "New reminder", null, newReminder); \n popup.appendChild(document.createElement("hr"));\n\n var t = findTiddlersWithReminders(dat, 0, null, null);\n for(var i = 0; i < t.length; i++) {\n link = createTiddlyLink(popup, t[i].tiddler, false);\n link.appendChild(document.createTextNode(t[i].tiddler));\n }\n\n}\n\nfunction calendarMaxDays(year, mon)\n{\n var max = config.macros.calendar.monthdays[mon];\n if(mon == 1 && (year % 4) == 0 && ((year % 100) != 0 || (year % 400) == 0)) {\n max++;\n }\n return max;\n}\n\nfunction createCalendarDayRows(cal, year, mon)\n{\n var row = createTiddlyElement(cal, "tr", null, null, null);\n\n var first1 = (new Date(year, mon, 1)).getDay() -1;\n if(first1 < 0) first1 = 6;\n var day1 = -first1 + 1;\n var first2 = (new Date(year, mon+1, 1)).getDay() -1;\n if(first2 < 0) first2 = 6;\n var day2 = -first2 + 1;\n var first3 = (new Date(year, mon+2, 1)).getDay() -1;\n if(first3 < 0) first3 = 6;\n var day3 = -first3 + 1;\n\n var max1 = calendarMaxDays(year, mon);\n var max2 = calendarMaxDays(year, mon+1);\n var max3 = calendarMaxDays(year, mon+2);\n\n while(day1 <= max1 || day2 <= max2 || day3 <= max3) {\n row = createTiddlyElement(cal, "tr", null, null, null);\n createCalendarDays(row, 0, day1, max1, year, mon); day1 += 7;\n createCalendarDays(row, 0, day2, max2, year, mon+1); day2 += 7;\n createCalendarDays(row, 0, day3, max3, year, mon+2); day3 += 7;\n }\n}\n\nfunction createCalendarDayRowsSingle(cal, year, mon)\n{\n var row = createTiddlyElement(cal, "tr", null, null, null);\n\n var first1 = (new Date(year, mon, 1)).getDay() -1;\n if(first1 < 0) first1 = 6;\n var day1 = -first1 + 1;\n var max1 = calendarMaxDays(year, mon);\n\n while(day1 <= max1) {\n row = createTiddlyElement(cal, "tr", null, null, null);\n createCalendarDays(row, 0, day1, max1, year, mon); day1 += 7;\n }\n}\n\nsetStylesheet("#mainMenu table, th, tr, td {font-size:10pt;}", "calendarStyles");\n}}}
要建立一個日誌用途的 TiddlyWiki 時,能產生月曆或年曆是個很好的應用。這個[[自訂巨集]]可以讓我們產生一個月曆或年曆,並且每個日期都是一個 Tiddler 連結,非常適合用來製作個人日誌型的記事用途。\n----\n!說明\n建立一個月曆或年曆,並且每個日期都是 Tiddler 連結。\n!用法\n{{{\n本月月曆\n<<calendar thismonth>>\n2006年1月\n<<calendar 2006 1>>\n今年年曆\n<<calendar>>\n2006年年曆\n<<calendar 2006>>\n}}}\n!效果\n本月月曆\n<<calendar thismonth>>\n年曆效果請自行嘗試。\n----\n>官方網站: SteveRumsby's [[YATWA|http://www.rumsby.org/yatwa/]]\n>下載點: http://www.rumsby.org/yatwa/#CalendarPlugin\n<<tiddler 安裝擴充套件提示>>
[[歡迎]]\n[[關於本站]]
// use <<displayDefaultTiddlers 'Home Page'>>\n// <<displayDefaultTiddlers>>\n{{{\nversion.extensions.displayDefaultTiddlers = {major: 0, minor: 1, revision: 0, date:new Date(2005,8,23)};\nconfig.macros.displayDefaultTiddlers = {label: "default tiddlers", prompt: "Display default tiddlers"};\n \nconfig.macros.displayDefaultTiddlers .handler = function(place,macroName,params) {\n var displayDefaultTiddlersFunc = function () {\n var start = store.getTiddlerText("DefaultTiddlers");\n closeAllTiddlers();\n displayTiddlers(null,start,1,null,null);\n }\n if (params[0]==null) {\n createTiddlyButton(place,this.label,this.prompt,displayDefaultTiddlersFunc);\n } else {\n createTiddlyButton(place,params[0],this.prompt,displayDefaultTiddlersFunc);\n }\n }\n}}}
當開啟的 Tiddler 愈來愈多時, TiddlyWiki 提供<<closeAll>>一次關閉所有開啟中的 Tiddler 。但是<<closeAll>>與一般網站的回首頁連結是不同的,它會連 DefaultTiddlers 裡的預設 Tiddler 也一併關閉。而 DisplayDefaultMacro 除了關閉所有開啟中的 Tiddler 之外,並且幫我們開啟 DefaultTiddlers 清單的 Tiddler ,讓你的 TiddlyWiki 回到剛開啟的預設裝態。這個自訂巨集是收錄自 [[zRenald's personal web notebook|http://www.zrenard.com/tiddlywiki/tiddlywiki.html]] 。\n----\n!說明\n建立超連結,用來關閉所有已開啟的 Tiddler 並開啟 DefaultTiddlers 裡列出的所有 Tiddler 。\n!用法\n{{{\n<<displayDefaultTiddlers 回首頁>>\n}}}\n*其中的「''回首頁''」可以替換成任何其它文字或直接省略。\n!效果\n<<displayDefaultTiddlers 回首頁>>\n----\n>官方網站: [[zRenald's personal web notebook|http://www.zrenard.com/tiddlywiki/tiddlywiki.html]]\n>下載點: http://www.zrenard.com/tiddlywiki/tiddlywiki.html#DisplayDefaultMacro\n\n<<tiddler 安裝擴充套件提示>>
當我們要使用''中文''、''一個英文單字''、或是''標題中有空格''的方式來創建 Tiddler 時,就必需使用 FreeLink 。 FreeLink 的使用方式,看實例最清楚。以下分別示範三種用法:\n{{{\n[[歡迎]] [[Tiddler]] [[Wiki Word]]\n}}}\n就是在 Tiddler 的標題前後用兩個中括弧夾起來便可。產生的結果如下:\n[[歡迎]] [[Tiddler]] [[Wiki Word]]\n\n<<tiddler '如何使 WikiWord 失效'>>
原本需要外掛才能做到的,直接在 Tiddler 裡面使用 HTML 語法的功能,從 TiddlyWiki 1.2.37 版開始成為內建的功能。有了 HTML 語法的支援,就能做到一些原本 wiki 語法做不到的是,最明顯的就是@@color(#3300cc):插入表單@@或@@color(#3300cc):插入 flash 動畫@@。\n\n使用方式,只要在 html 語法前後加上 {{{<html>}}} 和 {{{</html>}}} 標籤即可。\n\n*插入 flash 動畫範例:\n<html>\n<EMBED SRC=images/digital_019.swf WIDTH=150 HEIGHT=90 wmode=transparent quality=high loop=true menu=false>\n</html>\n\nflash 小時鐘來源: http://www.butabon.com/clock.htm\n\n*原始碼:\n{{{\n<html>\n<EMBED SRC=images/digital_019.swf WIDTH=150 HEIGHT=90 wmode=transparent quality=high loop=true menu=false>\n</html>\n}}}
// listtags tagname * or # or nothing\n// adding parameters to limit number of items (limit:number)\n// adding parameters to reverse order (reverse)\n{{{\nversion.extensions.listTags = {major: 0, minor: 1, revision: 0};\nconfig.macros.listTags = { text: "" };\nconfig.macros.listTags.handler = function(place,macroName,params)\n{ var limit=0;\n for(var t=0; t<params.length; t++) {\n type = params[t].split(":")[0].toLowerCase();\n if (type == "limit")\n limit = parseInt(params[t].split(":")[1]);\n if (type == "reverse")\n reverse= true;\n else\n reverse = false;\n }\n var tagged = store.getTaggedTiddlers(params[0],params[1]); //Second parameter is field to sort by (eg, title, modified, modifier or text)\n\nvar string = "";\nif (limit==0) limit = tagged.length; else limit=(limit>tagged.length) ? tagged.length : limit;\n\n if (reverse==true) {\nfor(var r=tagged.length-1;r>=(tagged.length-limit)&&r>=0;r--) {\n if(params[2]) string = string + params[2] + " ";\n string = string + "[[" + tagged[r].title + "]]\sn";\n}\n } else {\nfor(var r=0;r<limit;r++) {\n if(params[2]) string = string + params[2] + " ";\n string = string + "[[" + tagged[r].title + "]]\sn";\n}\n }\n\nwikify(string, place, null, null);\n}\n}}}
<<displayDefaultTiddlers '回首頁'>>\n[[歡迎]]\nTiddlyWiki\n[[認識環境]]\n[[使用教學]]\n[[容易攜帶]]\n[[容易編輯]]\n[[如何做…]]\n[[擴充套件]]\n----\n[[關於本站]]\n[[關於我]]\n[img[RSS|images/rss.gif][TiddlyWikiTutorialTW.xml]]\nSandBox\n----\n<<newTiddler>>\n<<newJournal "YYYY MM DD">>\n----\n[[TiddlyWiki 相關連結]]\n本站使用版本:@@<<version>>@@
這些設定將暫存於瀏覽器中,\n請簽名<<option txtUserName>>\n (範例:WikiWord)\n\n <<option chkSaveBackups>> [[儲存備份]]\n<<option chkAutoSave>> [[自動儲存]]\n<<option chkGenerateAnRssFeed>> [[產生 RssFeed]]\n<<option chkRegExpSearch>> [[正規式搜尋]]\n<<option chkCaseSensitiveSearch>> [[區分大小寫搜尋]]\n<<option chkAnimate>> [[使用動畫顯示]]\n\n <<slider sliderSiteSetupOptions 網站設定 網站設定 '網站設定'>>\n <<slider sliderAdvancedOptions AdvancedOptions 進階選項 '進階選項'>>
在這裡試各種 wiki 語法,不要隨便破壞其它文章的版面\n----\n\n<<calendar thismonth>>
以專注於內容的''一般使用者''觀點出發!
TiddlyWiki 使用教學中文版
http://web.nlhs.tyc.edu.tw/~lss/wiki/TiddlyWikiTutorialTW.html
!說明\n老實說,我對 [[Sparklines]] 是什麼完全沒有概念。Google 了一下,在 http://sparkline.org/ 找到下面這段說明:\n>What Are Sparklines?\n>\n>Sparklines are "intense, simple, wordlike graphics" so named by Edward Tufte. In lieu of a more detailed introduction, Professor Tufte's site has an early release of a chapter on sparklines.\n所以它是一種''簡單地、看起來像文字一樣的圖表''。這個[[巨集]]完全不需要用到任何的繪圖函式庫,便可以直接在 TiddlyWiki 裡畫出 [[Sparklines]],只需要給他一堆數字即可。\n!用法\n{{{\n<<sparkline 163 218 231 236 232 266 176 249 289 1041 1835 2285 3098 2101 1755 3283 3353 3335 2898 2224 1404 1354 1825 1839 2142 1942 1784 1145 979 1328 1611>>\n}}}\n!效果\n<<sparkline 163 218 231 236 232 266 176 249 289 1041 1835 2285 3098 2101 1755 3283 3353 3335 2898 2224 1404 1354 1825 1839 2142 1942 1784 1145 979 1328 1611>>
在[[使用教學]]裡,我們曾經提過 Tiddler 是一段文章段落。那麼 Tiddler 是如何組成的呢?\n\n在網站裡,可以看到很多 TiddlyWiki 這樣的英文單字組合,而且都連結至一個 Tiddler ,這樣的英文單字組合稱為 WikiWord 。在文章裡的任何 WikiWord 都會是一個 Tiddler 的連結。所以,要建立一個 Tiddler ,只要在文章裡的任何地方加上一個 WikiWord 便可。如果同名的 Tiddler 已經存在,則滑鼠點選 WikiWord 之後,便會開啟所指的 Tiddler 。如果沒有任何現有的 Tiddler 標題與該 WikiWord 相符,那麼,你已經創建了一個新的 Tiddler 。\n\n另外,我們也可以從左側功能表的<<newTiddler>>創建一個全新的 Tiddler ,或是用<<newJournal "DD MMM YYYY">>也可以創建一個新的 Tiddler 。兩者的不同是,<<newJournal "DD MMM YYYY">>會自動在 Tiddler 的標題填上現在的年月日,做為寫日誌的用途。\n\n除了 WikiWord 之外,網站上也看到了很多''標題為中文''的 Tiddler 。這是使用 FreeLink 的方式建立的 Tiddler 。有些時候,我們需要的 Tiddler 標題可能只有一個英文單字,或是單字中間加上空格,尤其是中文字的標題,跟本不可產生 WikiWord ,所以, wiki 便發展出了 FreeLink 這樣的方式來創建 Tiddler 。\n\n<<tiddler FreeLink>>
TiddlyWiki 是一個由「 javascript + CSS 樣式 + HTML 語法」所組成的 html 檔。它可以讓你''在本機編輯''使用 wiki 語法編輯網頁內容,除了不像一般的 wiki 程式可以在網路上供多人共同編輯之外,其它的功能一概不缺。更重要的是,他只需要一個小小的 html 檔案就可以使用瀏覽器執行,完全不需要網路主機、PHP 或 ASP 以及資料庫等的支援。你所寫的文章,也是存在這個 html 檔裡,沒錯,''全部就只有一個檔''。\n\n說了這麼多, TiddlyWiki 到底能做什麼?你可以把它存在個人電腦裡,用來做個人記事本、行事曆、日記、備忘錄、待辦事項…等。放在隨身碟裡,還可以到處帶著走,放到個人網頁空間,就成了個人網站。以上這些功能,全都在一個小小的 html 檔案裡,非常方便。\n\n推薦看看老貓寫的這篇文章:[[TiddlyWiki 真好玩|http://b-oo-k.net/blog/post/1/400]],看看如何發揮想像力,讓 TiddlyWiki 為你發揮他的潛能。\n\n如果 TiddlyWiki 已經吸引你的目光,請繼續往下看[[認識環境]];如果你已迫不及待想直接使用,請直接看[[使用教學]]。
*中文資源:\n**[[BramChen 的 PrinceTiddlyWiki|http://ptw.sourceforge.net/]]。\n**[[MilchFlasche 的 TiddlyWiki之美|http://linshi.twbbs.org/usr/m/milchflasche/TiddlyWiki.html]]。\n**老貓的兩篇介紹文章:[[TiddlyWiki真好玩|http://b-oo-k.net/blog/post/1/400]] 和 [[TiddlyWiki安裝與使用指南|http://b-oo-k.net/blog/post/1/401]]。\n**~TiddlyWiki 的[[中文 google group|http://groups.google.com/group/PrinceTiddlyWiki]]。\n**敝小站:[[中文使用教學|http://web.nlhs.tyc.edu.tw/wiki/TiddlyWikiTutorialTW.html]]。\n*英文資源:\n**[[TiddlyWiki 官方網站|http://www.tiddlywiki.com]]。\n**~TiddlyWiki 的[[英文 google group|http://groups.google.com/group/TiddlyWiki]]。\n**官方推薦教學網站:[[TiddlyWikiTutorial|http://www.blogjones.com/TiddlyWikiTutorial.html]]。\n**官方推薦 ~TiddlyWiki 好用 Tips 網站:[[TiddlyWikiTips|http://tiddlywikitips.com/]]。\n**官方推薦另一個好用 Tips 網站:[[zRenard's personal web notebook|http://www.zrenard.com/tiddlywiki/tiddlywiki.html]]
/***\n|''Name:''|WikiBarPlugin|\n|''Version:''|1.1.0|\n|''Source:''|[[AiddlyWiki|http://aiddlywiki.sourceforge.net]]|\n|''Author:''|[[Arphen Lin|mailto:arphenlin@gmail.com]]|\n|''Type:''|Plugin extension|\n|''Required:''|TiddlyWiki 1.2.36+|\n!Description\nThe WikiBarPlugin provides user a TiddlyWiki syntax-bar under the tiddler edit mode. It's a handy tool for people who are not familiar with the TiddlyWiki syntax.\n!Support browser\n*Firefox 1.0.7\n!Revision history\n*v1.0.0 (2005/10/30)\n**Initial release\n*v1.1.0 (2005/11/01)\n**Bugs fixed:\n***WikiBar overruns (reported by by "GeoffS" <gslocock@yahoo.co.uk>)\n**New features:\n***Insert a color code at the cursor. (Thanks to "RunningUtes" <RunningUtes@gmail.com>)\n***Enable gradient macro. (Thanks to "RunningUtes" <RunningUtes@gmail.com>)\n***Insert tiddler comment tags {{{/% ... %/}}}. (new feature supported by TiddlyWiki 1.2.37)\n***Insert DateFormatString for {{{<<today>>}}} macro. (new feature supported by TiddlyWiki 1.2.37)\n**Enhanced:\n***Allow optional parameters in syntax.\n!Code\n***/\n//{{{\n\nversion.extensions.WikiBar = {major: 1, minor: 1, revision: 0, date: new Date(2005,11,1)};\n\n//------------------------------------------------------------------------------------------------\n// the syntax will be applied on the current word\n// params: editor, [[param1],[param2],...]\n//------------------------------------------------------------------------------------------------\napl_wikibar_formatByWord = function(editor, params){\n\n clearMessage();\n \n try{\n \n if(!editor) return;\n \n repText = processSyntaxParams(this.syntax, params);\n if(!repText) return;\n \n var st = editor.scrollTop;\n var ss = editor.selectionStart;\n var se = editor.selectionEnd;\n \n// displayMessage(ss + ',' + se);\n \n var frontText= '';\n var selText = '';\n var endText = '';\n var fullText = editor.value;\n \n if(se>ss && ss>=0){ // has selection\n frontText = fullText.substring(0, ss); // text before selection\n selText = fullText.substring(ss,se);\n endText = fullText.substring(se, fullText.length); // text behind selection\n }\n else if(ss==0 && (se==0 || se == fullText.length) ){ // no selection, cursor in begin\n endText = fullText; // text behind selection\n }\n else if(se==ss && ss>0){ // no selection, cursor in text\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n\n //select a word\n if( fullText.charAt(ss-1).match(/\sW/gi) || fullText.charAt(ss).match(/\sW/gi) ){ \n ;\n }\n else{ // cursor in text\n\n // find the lastest non-word position of frontText\n var m = frontText.match(/\sW/gi);\n if(m){\n ss = frontText.lastIndexOf(m[m.length-1])+1;\n }\n else{ // not found\n ss = 0; \n }\n \n \n // find the first non-word position of endText\n m = endText.match(/\sW/gi);\n if(m){\n se += endText.indexOf(m[0]);\n }\n else{ // not found\n se = fullText.length;\n }\n\n // re-positioning\n// displayMessage(ss + ',' + se);\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n selText = fullText.substring(ss,se);\n \n }\n }\n \n if(selText.length>0)\n repText = repText.replace('user_text', selText);\n \n if(repText.indexOf('user_text')>=0 && this.hint)\n repText = repText.replace('user_text', this.hint); \n \n editor.value = frontText + repText + endText;\n \n // re-positioning\n editor.selectionStart = ss;\n editor.selectionEnd = ss + repText.length;\n editor.scrollTop = st;\n \n editor.focus();\n \n }catch(ex){\n if(ex.description)\n alert('apl_wikibar_formatByWord(): '+ex.description);\n else\n displayMessage('apl_wikibar_formatByWord(): '+ex);\n }\n \n}\n\n// params may be null, string or array\nfunction processSyntaxParams(syntaxStr, params)\n{\n try{\n \n var rx=null;\n var totalParams=null;\n // replace parameter: %1,%2,...\n if(params!=null){\n if(typeof(params)=="object"){ // array\n for(i=0; i<params.length; i++){\n if(params[i]){\n rx = "(\s\s[%"+(i+1)+"\s\s])" + "|" + "(%"+(i+1)+")";\n syntaxStr = syntaxStr.replace(new RegExp(rx,"g"), params[i]);\n }\n }\n totalParams = params.join(' ').trim();\n }\n else{ // string\n totalParams = params.trim();\n rx = /(\s[%1{1}\s])|(%1{1})/g;\n syntaxStr = syntaxStr.replace(rx, totalParams);\n } \n }\n \n \n // replace parameter: %N\n if(totalParams)\n syntaxStr = syntaxStr.replace(new RegExp('%N{1}',"g"), totalParams);\n \n // remove optional parameters\n rx=/\s[%(([1-9]{1,}[0-9]{0,})|(N{1}))\s]/g;\n syntaxStr = syntaxStr.replace(rx, '');\n \n // check if replaced ok\n rx=/%(([1-9]{1,}[0-9]{0,})|(N{1}))/g;\n if( syntaxStr.match(rx) ){\n throw "Not enough parameters! " + syntaxStr;\n }\n \n return syntaxStr;\n \n } catch(ex){\n if(ex.description)\n displayMessage('processSyntaxParams(): '+ex.description);\n else\n displayMessage('processSyntaxParams(): '+ex);\n \n return null;\n }\n}\n\n//------------------------------------------------------------------------------------------------\n// common format function\n//------------------------------------------------------------------------------------------------\napl_wikibar_format = function(editor, params){\n\n clearMessage();\n \n try{\n \n if(!editor) return;\n \n repText = processSyntaxParams(this.syntax, params);\n if(!repText) return;\n \n var st = editor.scrollTop;\n var ss = editor.selectionStart;\n var se = editor.selectionEnd;\n \n// displayMessage(ss + ',' + se);\n \n var frontText= '';\n var endText = '';\n var fullText = editor.value;\n \n if(se>ss && ss>=0){ // has selection\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n }\n else if(ss==0 && (se==0 || se == fullText.length) ){ // no selection, cursor in begin\n endText = fullText; // text behind selection\n }\n else if(se==ss && ss>0){ // no selection, cursor in text\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n }\n \n if(repText.indexOf('user_text')>=0 && this.hint)\n repText = repText.replace('user_text', this.hint); \n \n editor.value = frontText + repText + endText;\n \n // re-positioning\n editor.selectionStart = ss;\n editor.selectionEnd = ss + repText.length;\n editor.scrollTop = st;\n \n editor.focus();\n \n }catch(ex){\n if(ex.description)\n alert('apl_wikibar_formatByCursor(): '+ex.description);\n else\n displayMessage('apl_wikibar_formatByCursor(): '+ex);\n }\n \n}\n\n\n//------------------------------------------------------------------------------------------------\n// if selected text, replace it\n// else insert it\n//------------------------------------------------------------------------------------------------\napl_wikibar_formatByCursor = function(editor, params){\n\n clearMessage();\n \n try{\n \n if(!editor) return;\n \n repText = processSyntaxParams(this.syntax, params);\n if(!repText) return;\n \n var st = editor.scrollTop;\n var ss = editor.selectionStart;\n var se = editor.selectionEnd;\n \n// displayMessage(ss + ',' + se);\n \n var frontText= '';\n var endText = '';\n var fullText = editor.value;\n \n if(se>ss && ss>=0){ // has selection\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n }\n else if(ss==0 && (se==0 || se == fullText.length) ){ // no selection, cursor in begin\n endText = fullText; // text behind selection\n }\n else if(se==ss && ss>0){ // no selection, cursor in text\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n }\n \n if(repText.indexOf('user_text')>=0 && this.hint)\n repText = repText.replace('user_text', this.hint); \n \n editor.value = frontText + repText + endText;\n \n // re-positioning\n editor.selectionStart = ss;\n editor.selectionEnd = ss + repText.length;\n editor.scrollTop = st;\n \n editor.focus();\n \n }catch(ex){\n if(ex.description)\n alert('apl_wikibar_formatByCursor(): '+ex.description);\n else\n displayMessage('apl_wikibar_formatByCursor(): '+ex);\n }\n \n}\n\n//------------------------------------------------------------------------------------------------\n// the syntax will be applied on the current line\n//------------------------------------------------------------------------------------------------\napl_wikibar_formatByLine = function(editor, params)\n{\n\n clearMessage();\n \n try{\n \n if(!editor) return;\n \n repText = processSyntaxParams(this.syntax, params);\n if(!repText) return; \n \n \n var st = editor.scrollTop;\n var ss = editor.selectionStart;\n var se = editor.selectionEnd;\n \n// displayMessage(ss + ',' + se);\n \n var frontText= '';\n var selText = '';\n var endText = '';\n var fullText = editor.value;\n \n if(se>ss && ss>=0){ // has selection\n if(this.byBlock){\n frontText = fullText.substring(0, ss); // text before selection\n selText = fullText.substring(ss,se); // selection text\n endText = fullText.substring(se, fullText.length); // text behind selection\n }\n else{\n se = ss;\n }\n// displayMessage('has selection ' + ss + ',' + se);\n }\n \n if(ss==0 && (se==0 || se == fullText.length) ){ // no selection, cursor in begin\n var m=fullText.match(/(\sn|\sr)/g); // position of line-break\n if(m)\n se = fullText.indexOf(m[0]);\n else\n se = fullText.length;\n\n// displayMessage('no selection, cursor in begin: ' + ss + ',' + se); \n selText = fullText.substring(0, se); \n endText = fullText.substring(se, fullText.length); // text behind selection \n }\n else if(se==ss && ss>0){ // no selection text, cursor in text\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n \n // find the last position of line-break in frontText\n var m = frontText.match(/(\sn|\sr)/g); // position of line-break\n if(m){\n ss = frontText.lastIndexOf(m[m.length-1])+1;\n }\n else{ // not found\n ss = 0; \n }\n \n // find the first position of line-break in endText\n m = endText.match(/(\sn|\sr)/g); // position of line-break\n if(m){\n se += endText.indexOf(m[0]);\n }\n else{ // not found\n se = fullText.length;\n }\n\n // re-positioning\n// displayMessage('no selection text, cursor in text: ' + ss + ',' + se);\n frontText = fullText.substring(0, ss); // text before selection\n selText = fullText.substring(ss,se);\n endText = fullText.substring(se, fullText.length); // text behind selection\n }\n \n if(selText.length>0)\n repText = repText.replace('user_text', selText);\n \n if(repText.indexOf('user_text')>=0 && this.hint)\n repText = repText.replace('user_text', this.hint); \n \n if(this.byBlock){ \n // add extra line-breaks\n if( (frontText.charAt(frontText.length-1)!='\sn') && ss!=0 )\n repText = '\sn' + repText;\n if( (endText.charAt(0)!='\sn') || se==fullText.length)\n repText += '\sn';\n }\n \n editor.value = frontText + repText + endText;\n \n // re-positioning\n editor.selectionStart = ss;\n editor.selectionEnd = ss + repText.length;\n editor.scrollTop = st;\n \n editor.focus();\n \n }catch(ex){\n if(ex.description)\n alert('apl_wikibar_formatByLine(): '+ex.description);\n else\n displayMessage('apl_wikibar_formatByLine(): '+ex);\n }\n \n}\n\n//------------------------------------------------------------------------------------------------\n// the syntax will be applied on the table cell(if exist)\n//------------------------------------------------------------------------------------------------\napl_wikibar_formatByTableCell = function(editor, params){\n\n clearMessage();\n \n try{\n \n if(!editor) return;\n \n repText = processSyntaxParams(this.syntax, params);\n if(!repText) return;\n \n var st = editor.scrollTop;\n var ss = editor.selectionStart;\n var se = editor.selectionEnd;\n \n// displayMessage(ss + ',' + se);\n \n var frontText= '';\n var selText = '';\n var endText = '';\n var fullText = editor.value;\n \n if(ss==0 || ss==fullText.length)\n throw "not valid cell!";\n \n se=ss; \n \n// displayMessage(ss);\n frontText = fullText.substring(0, ss); // text before selection\n endText = fullText.substring(se, fullText.length); // text behind selection\n \n // find the last '|' position in frontText\n i=frontText.lastIndexOf("\sn");\n j=frontText.lastIndexOf("|");\n if(i>j || j<0)\n //throw "frontText not valid cell! " + i + "," + j;\n throw "not valid cell!";\n \n ss = j+1;\n \n // find the first '|' position in endText\n i=endText.indexOf("\sn");\n j=endText.indexOf("|");\n if(i<j || j<0)\n //throw "endText not valid cell! " + i + "," + j;\n throw "not valid cell!";\n \n se += j;\n \n // re-positioning\n// displayMessage(ss + ',' + se);\n frontText = fullText.substring(0, ss-1); // text before selection\n selText = fullText.substring(ss,se);\n endText = fullText.substring(se+1, fullText.length); // text behind selection\n\n if(this.name.substring(0,5)=="align"){\n selText = selText.trim();\n if( selText==">" || selText=="~" || \n selText.substring(0,8)=="bgcolor(" \n ) // bypass special table code\n return;\n }\n \n if(selText.length>0)\n repText = repText.replace('user_text', selText);\n \n if(repText.indexOf('user_text')>=0 && this.hint)\n repText = repText.replace('user_text', this.hint); \n \n editor.value = frontText + repText + endText;\n \n // re-positioning\n editor.selectionStart = ss;\n editor.selectionEnd = ss + repText.length - 2;\n editor.scrollTop = st;\n \n editor.focus();\n \n }catch(ex){\n if(ex.description)\n alert('apl_wikibar_formatByTableCell(): '+ex.description);\n else\n displayMessage('apl_wikibar_formatByTableCell(): '+ex);\n }\n \n}\n\n\n//------------------------------------------------------------------------------------------------\n// param: editor, button_pressed\n//------------------------------------------------------------------------------------------------\napl_wikibar_getColorCode = function(editor, theTarget)\n{\n if(!apl_wikibar_colorPicker) return;\n \n apl_wikibar_colorPicker.targetSyntax = this;\n apl_wikibar_colorPicker.targetEditor = editor;\n apl_wikibar_colorPicker.moveColorMap(theTarget); \n}\n\napl_wikibar_getLinkUrl = function(editor)\n{\n var url= prompt('Please enter the link target', this.param);\n if (url && url.trim()!='')\n this.format(editor, url);\n}\n\napl_wikibar_getTableRowCol = function(editor)\n{\n var rc= prompt('Please enter rows x cols of the table', '2 x 3');\n if (!rc || rc.trim()=='') return;\n \n var arr = rc.toUpperCase().split('X');\n if(arr.length != 2) return;\n \n for(i=0; i<arr.length; i++)\n if(isNaN(arr[i].trim())) return;\n \n rows = parseInt(arr[0].trim());\n cols = parseInt(arr[1].trim());\n \n txtTable='';\n for(r=0; r<rows; r++){\n for(c=0; c<=cols; c++)\n if(c==0)\n txtTable += '|';\n else\n txtTable += ' |';\n \n txtTable += '\sn';\n }\n\n if(txtTable.trim()!='') \n this.format(editor, txtTable);\n \n}\n\napl_wikibar_getMacroParam = function(editor)\n{\n try{\n var p = prompt('Please enter the parameters of ' + this.name + ' macro:' + \n '\snSyntax: ' + this.syntax +\n '\sn\snNote: '+\n '\sn%1,%2,... - parameter needed'+ \n '\sn[%1] - optional parameter'+\n '\sn%N - more than one parameter(1~n)'+\n '\sn[%N] - any number of parameters(0~n)'+\n '\sn\snPS:'+\n '\sn Parameters should be seperated with space character'+\n '\sn Use "" to wrap the parameter that includes space character, ex: "hello world"'+\n '\sn Input the word(null) for the optional parameter ignored',\n (this.param?this.param:'') );\n \n if(p==null) return;\n\n p=p.readMacroParams();\n for(i=0;i<p.length;i++){\n var s=p[i].trim();\n if(s.indexOf(' ')>0)\n p[i]="'"+s+"'";\n if(s.toLowerCase()=="null")\n p[i]=null;\n }\n \n this.format(editor, p);\n \n }catch(ex){\n if(ex.description)\n alert('apl_wikibar_getMacroParam(): '+ex.description);\n else\n displayMessage('apl_wikibar_getMacroParam(): '+ex);\n } \n}\n\n\n\n//------------------------------------------------------------------------------------------------\n// hijack createTiddlerEditor() to create WikiBar\n//------------------------------------------------------------------------------------------------\nwindow.apl_wikibar_createTiddlerEditor = window.createTiddlerEditor;\nwindow.createTiddlerEditor = function (title)\n{\n // call original function\n apl_wikibar_createTiddlerEditor(title);\n \n // create wiki-bar\n apl_wikibar_createWikibar(title);\n}\n\nfunction apl_wikibar_createWikibar(title){\n\n try{\n \n // insert wikisyntax toolbar before editorBodyXXX\n var theEditor = document.getElementById("editorWrapper" + title);\n var theBodyBox = document.getElementById("editorBody" + title);\n \n // create Wikibar\n// var theWikibar = createTiddlyElement(theEditor,"div","editorWikibar" + title,"toolbar",null);\n var theWikibar = createTiddlyElement(theEditor,"div","editorWikibar" + title,null,null);\n\n theEditor.insertBefore(theWikibar,theBodyBox);\n \n // create tool buttons\n \n //---------------\n // single button\n //---------------\n \n // about\n var btn = apl_wikibar_createWikibarButton(theWikibar, "&copy;", "about WikiBarPlugin", apl_wikibar_onClickAbout, title);\n if(btn) btn.id = "apl_wikibar_btn_about";\n\n // preview\n btn = apl_wikibar_createWikibarButton(theWikibar, "&infin;", "preview the tiddler", apl_wikibar_onClickPreview, title);\n if(btn) btn.id = "apl_wikibar_btn_preview";\n \n // formattings\n for(i=0; i<apl_wikibar_syntaxes.formattings.length; i++){\n var syntaxObj = apl_wikibar_syntaxes.formattings[i];\n syntax_desc = "apl_wikibar_syntaxes.formattings["+i+"]";\n if(syntaxObj.symbol)\n apl_wikibar_createWikibarButton(theWikibar, syntaxObj.symbol, syntaxObj.tip, apl_wikibar_onClickWikibarButton, title, syntax_desc);\n else\n apl_wikibar_createWikibarButton(theWikibar, syntaxObj.name, syntaxObj.tip, apl_wikibar_onClickWikibarButton, title, syntax_desc);\n }\n \n //---------------\n // dropdown menu\n //---------------\n apl_wikibar_createWikibarButton(theWikibar, "color", "Color", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.colors");\n apl_wikibar_createWikibarButton(theWikibar, "link", "Link", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.links");\n apl_wikibar_createWikibarButton(theWikibar, "Hn", "Heading", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.headings");\n apl_wikibar_createWikibarButton(theWikibar, "list", "List", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.lists");\n apl_wikibar_createWikibarButton(theWikibar, "paragraph", "Paragraph format", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.paragraphs");\n apl_wikibar_createWikibarButton(theWikibar, "table", "Table", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.tables");\n apl_wikibar_createWikibarButton(theWikibar, "plugin", "Plugin design", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.plugins");\n apl_wikibar_createWikibarButton(theWikibar, "macro", "Macro", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.macros");\n apl_wikibar_createWikibarButton(theWikibar, "date", "Date format string", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.dates");\n apl_wikibar_createWikibarButton(theWikibar, "html", "HTML", apl_wikibar_onClickWikibarMenu, title, null, "apl_wikibar_syntaxes.htmls");\n \n }catch(ex){\n alert('apl_wikibar_createWikibar(): '+ex.description);\n }\n \n}\n\n//------------------------------------------------------------------------------------------------\n// create wikibar button\n// ps. \n// if single button: syntax_objs=null, syntax_obj needed\n// if group button: syntax_objs needed, syntax_obj=null\n//------------------------------------------------------------------------------------------------\nfunction apl_wikibar_createWikibarButton(theToolbar, theText, theTooltip, theAction, title, syntax_obj, syntax_objs)\n{\n try{\n \n if(!theToolbar) return null;\n \n // call system function to add a button\n //createTiddlyButton(theParent,theText,theTooltip,theAction,theClass,theId,theAccessKey)\n var theButton = createTiddlyButton(theToolbar, theText, theTooltip, theAction, "button");\n if(!theButton) return null;\n\n// insertSpacer(theToolbar);\n \n // fix the wikibar overrun bug\n theToolbar.appendChild( document.createTextNode("\sn") );\n \n theButton.innerHTML = theText; // html is allowed here, ex: "<b>B</b>"\n\n // add parameters to theButton, those parameters will be used on onclick event\n // setAttribute() only accepts string variable, object is not allowed!\n // we'll use eval() to convert string to object, refer to apl_wikibar_onClickWikibarButton()\n if(title)\n theButton.setAttribute("tiddler_title", title);\n \n if(syntax_objs)\n theButton.setAttribute("syntax_objs", syntax_objs);\n\n if(syntax_obj)\n theButton.setAttribute("syntax_obj", syntax_obj);\n \n return theButton;\n \n }catch(ex){\n alert('apl_wikibar_createWikibarButton(): '+ex.description);\n return null;\n }\n \n}\n\n//------------------------------------------------------------------------------------------------\n// button(<a>) may have other tags, ex: <a><b>B</b></a>\n// when we click the button, the apl_wikibar_onClickWikibarButton event may be received by the childNodes of <a>\n// so we try to look up to the button object(<a>), as <a> has the parameters we need\n//------------------------------------------------------------------------------------------------\nfunction apl_wikibar_resolveClickButton(obj)\n{\n if (obj.id=="tiddlerDisplay") // search until tiddlerDisplay is reached\n return null;\n \n if(obj.hasAttributes()){\n if(obj.getAttribute("tiddler_title"))\n return obj;\n else\n return apl_wikibar_resolveClickButton(obj.parentNode); // search the parent\n }\n else{\n return apl_wikibar_resolveClickButton(obj.parentNode); // search the parent\n }\n}\n\n\nfunction apl_wikibar_switchWikibar(wikibar, visible)\n{\n if(!wikibar) return;\n \n var pv=null;\n // hide other buttons\n for(i=0; i<wikibar.childNodes.length; i++){ \n try{\n var theButton = wikibar.childNodes[i];\n\n if(theButton.id == "apl_wikibar_btn_preview") \n pv=theButton;\n\n if(theButton.id != "apl_wikibar_btn_about" && theButton.id != "apl_wikibar_btn_preview")\n theButton.style.display = visible ? "": "none";\n \n }catch(ex){\n ;\n }\n }\n \n if(!pv) return;\n \n // update the caption of preview button\n if(visible){\n pv.innerHTML = "&infin;";\n pv.setAttribute("title", "show previewer");\n }\n else{\n pv.innerHTML = "&larr;";\n pv.setAttribute("title", "back to editor");\n }\n \n}\n\nfunction apl_wikibar_displayAboutBox(theAbout, theTarget)\n{\n try{\n\n if(!theAbout || !theTarget) return;\n \n var rootLeft = findPosX(theTarget);\n var rootTop = findPosY(theTarget);\n var rootHeight = theTarget.offsetHeight;\n \n var popupLeft = rootLeft;\n var popupTop = rootTop + rootHeight;\n \n var popupWidth = theAbout.offsetWidth;\n \n var winWidth = findWindowWidth();\n if(popupLeft + popupWidth > winWidth)\n popupLeft = winWidth - popupWidth;\n \n theAbout.style.left = popupLeft + "px";\n theAbout.style.top = popupTop + "px";\n theAbout.style.display = "block";\n \n// window.scrollTo(0,y); // some bugs here\n \n }catch(ex){\n alert('apl_wikibar_displayAboutBox(): '+ex.description);\n }\n}\n\nfunction apl_wikibar_onClickAbout(e)\n{\n if (!e) var e = window.event;\n var theTarget = resolveTarget(e);\n if(!theTarget) return(false);\n \n try{\n \n // check if already exist\n var theAbout = document.getElementById("aboutWikibar");\n \n if(theAbout){ // switch theAbout\n relateTo = theAbout.getAttribute("relateTo");\n if(relateTo == theTarget.parentNode.id){\n theAbout.style.display = (theAbout.style.display=="block")? "none" : "block";\n }\n else{\n theAbout.setAttribute("relateTo", theTarget.parentNode.id);\n apl_wikibar_displayAboutBox(theAbout, theTarget);\n }\n }\n else{ // create theAbout box\n theAbout = document.createElement("div");\n theAbout.setAttribute("id", "aboutWikibar");\n theAbout.setAttribute("style", "position:absolute; z-index:99; display:block; background-color:white; border:medium solid red;");\n theAbout.setAttribute("class", "viewer");\n ver = version.extensions.WikiBar.major + "." + version.extensions.WikiBar.minor + "." + version.extensions.WikiBar.revision;\n theAbout.innerHTML = '<center>WikiBarPlugin Version '+ver+'<br></center><hr><ul>'+\n '<li>Author: <a href="mailto:arphenlin@gmail.com">Arphen Lin</a></li>'+\n '<li>Web: <a href="http://aiddlywiki.sourceforge.net/" target="new">AiddlyWiki</a></li>'+\n '</ul>';\n theAbout.onclick = function(){\n document.getElementById("aboutWikibar").style.display="none";\n }; \n theAbout.setAttribute("relateTo", theTarget.parentNode.id);\n \n document.body.appendChild(theAbout);\n \n apl_wikibar_displayAboutBox(theAbout, theTarget);\n }\n \n }catch(ex){\n alert('apl_wikibar_onClickAbout(): '+ ex.description);\n } \n\n e.cancelBubble = true;\n if (e.stopPropagation) e.stopPropagation();\n return(false); \n}\n\nfunction apl_wikibar_onClickPreview(e)\n{\n if (!e) var e = window.event;\n var theTarget = resolveTarget(e);\n if(!theTarget) return(false);\n \n// displayMessage(theTarget);\n \n try{\n\n var wikibar = theTarget.parentNode;\n if(!wikibar) return;\n \n title = wikibar.id.substring(13, wikibar.id.length); // "editorWikibar"+title\n var editorWrapper = document.getElementById( "editorWrapper"+title);\n \n var editor= document.getElementById("editorBody"+title);\n\n // check if already exist\n var previewer = document.getElementById("previewer"+title);\n if(previewer){ // switch previewer\n if(previewer.style.display=="block"){\n previewer.style.display = "none";\n editor.style.display = "block";\n }\n else{\n previewer.innerHTML = ''; // clear the contents\n wikify(editor.value, previewer, null, null); // refresh the contents\n previewer.style.display = "block";\n editor.style.display = "none";\n }\n }\n else{ // create previewer\n previewer = document.createElement("div");\n previewer.setAttribute("id", "previewer"+title);\n previewer.setAttribute("style", "overflow:auto; display:block; border:solid 1px;");\n previewer.style.height = (editor.offsetHeight) + "px";\n previewer.setAttribute("class", "viewer");\n editorWrapper.insertBefore(previewer, editor);\n \n wikify(editor.value, previewer, null, null);\n \n // hide editor\n editor.style.display = "none";\n }\n \n apl_wikibar_switchWikibar(wikibar, (editor.style.display=="block") );\n \n }catch(ex){\n alert('apl_wikibar_onClickPreview(): '+ ex.description);\n } \n\n e.cancelBubble = true;\n if (e.stopPropagation) e.stopPropagation();\n return(false);\n \n}\n\n\n//------------------------------------------------------------------------------------------------\n// onclick event handler\n//------------------------------------------------------------------------------------------------\nfunction apl_wikibar_onClickWikibarButton(e)\n{\n if (!e) var e = window.event;\n var theTarget = apl_wikibar_resolveClickButton(resolveTarget(e));\n if(!theTarget) return(false);\n \n try{\n \n title = theTarget.getAttribute("tiddler_title");\n \n var editor = document.getElementById("editorBody"+title);\n if(!editor) return;\n \n var syntax = null;\n cmd = "syntax = " + theTarget.getAttribute("syntax_obj");\n eval(cmd);\n if(!syntax) return;\n \n if(syntax.needParam)\n syntax.needParam(editor, theTarget);\n else\n syntax.format(editor);\n \n }catch(ex){\n alert('apl_wikibar_onClickWikibarButton(): '+ ex.description);\n } \n\n e.cancelBubble = true;\n if (e.stopPropagation) e.stopPropagation();\n return(false);\n\n}\n\n\n//------------------------------------------------------------------------------------------------\n// create drop-down menu\n//------------------------------------------------------------------------------------------------\nfunction apl_wikibar_onClickWikibarMenu(e)\n{\n if(!e) var e = window.event;\n var theTarget = resolveTarget(e); // = <span>, the object we click on\n \n try{ \n \n title = theTarget.getAttribute("tiddler_title");\n \n // retrieve the string and eval() it \n my_syntaxes = theTarget.getAttribute("syntax_objs");\n var items=null;\n cmd = "items = "+my_syntaxes;\n eval(cmd);\n if(!items) return;\n\n var popup = createTiddlerPopup(this);\n if(!popup) return;\n\n for (i=0; i<items.length; i++){\n var theItem = createTiddlyButton(\n createTiddlyElement(popup, "li"),\n items[i].name,\n items[i].tip,\n apl_wikibar_onClickWikibarButton\n );\n\n theItem.setAttribute("syntax_obj", my_syntaxes + "["+i+"]");\n theItem.setAttribute("tiddler_title", title);\n }\n\n scrollToTiddlerPopup(popup,false);\n \n }catch(ex){\n alert('apl_wikibar_onClickWikibarMenu(): '+ex.description);\n } \n \n e.cancelBubble = true;\n if (e.stopPropagation) e.stopPropagation();\n return(false);\n \n}\n\n\n//------------------------------------------------------------------------------------------------\n// apl_wikibar_ColorPicker class\n//------------------------------------------------------------------------------------------------\nfunction apl_wikibar_ColorPicker(theAction){\n \n // 16x16 colors\n this.colorTable = [ \n "#FFFFFF","#DDDDDD","#CCCCCC","#BBBBBB","#AAAAAA","#999999","#666666","#333333","#111111","#000000","#FFCC00","#FF9900","#FF6600","#FF3300","#CC3300","#CC0033",\n "#99CC00","#99DD00","#99EE00","#EE9900","#DD9900","#CC9900","#FFCC33","#FFCC66","#FF9966","#FF6633","#660000","#990000","#CC0000","#FF0000","#FF3366","#FF0033",\n "#CCFF00","#CCFF33","#333300","#666600","#999900","#CCCC00","#FFFF00","#CC9933","#CC6633","#330000","#993333","#CC3333","#FF3333","#CC3366","#FF6699","#FF0066",\n "#99FF00","#CCFF66","#99CC33","#666633","#999933","#CCCC33","#FFFF33","#996600","#993300","#663333","#CC6666","#FF6666","#990033","#CC3399","#FF66CC","#FF0099",\n "#66FF00","#99FF66","#66CC33","#669900","#999966","#CCCC66","#FFFF66","#996633","#663300","#996666","#FF9999","#FF3399","#CC0066","#990066","#FF33CC","#FF00CC",\n "#33FF00","#66FF33","#339900","#66CC00","#99FF33","#CCCC99","#FFFF99","#CC9966","#CC6600","#CC9999","#FF99CC","#CC6699","#993366","#660033","#CC0099","#330033",\n "#00CC00","#33CC00","#336600","#669933","#99CC66","#CCFF99","#FFFFCC","#FFCC99","#FF9933","#FFCCCC","#CC99CC","#996699","#993399","#990099","#663366","#660066",\n "#006600","#33CC33","#66CC66","#00FF00","#33FF33","#66FF66","#99FF99","#CCFFCC","#99CCFF","#FFCCFF","#FF99FF","#FF66FF","#FF33FF","#FF00FF","#CC66CC","#CC33CC",\n "#003300","#336633","#009900","#339933","#669966","#99CC99","#CCFFFF","#3399FF","#6699CC","#CCCCFF","#CC99FF","#9966CC","#663399","#330066","#9900CC","#CC00CC",\n "#00FF33","#00CC33","#006633","#339966","#66CC99","#99FFCC","#99CCCC","#0066CC","#336699","#9999FF","#9999CC","#9933FF","#6600CC","#660099","#CC33FF","#CC00FF",\n "#00FF66","#33FF66","#009933","#00CC66","#33FF99","#99FFFF","#669999","#003366","#003399","#6666FF","#6666CC","#666699","#330099","#9933CC","#CC66FF","#9900FF",\n "#00FF99","#66FF99","#33CC66","#009966","#66FFFF","#66CCCC","#336666","#006699","#3366CC","#3333FF","#3333CC","#333399","#333366","#6633CC","#9966FF","#6600FF",\n "#00FFCC","#66FFCC","#33CC99","#33FFFF","#33CCCC","#339999","#003333","#3399CC","#6699FF","#0000FF","#0000CC","#000099","#000066","#000033","#6633FF","#3300FF",\n "#00CC99","#33FFCC","#00FFFF","#00CCCC","#009999","#006666","#33CCFF","#66CCFF","#0099CC","#3366FF","#00CCFF","#0099FF","#0066FF","#0033FF","#0033CC","#3300CC"\n ];\n\n this.colorMap = null; // div object\n\n this.targetSyntax = null; // the syntax object that called apl_wikibar_ColorPicker\n this.targetEditor = null; // the editor object that will be applied selected color\n this.theAction = theAction;\n \n this.createColorMap();\n\n}\n\napl_wikibar_ColorPicker.prototype.showColorMap = function() \n{\n if(this.colorMap){\n this.colorMap.style.display = "block";\n }\n}\n\napl_wikibar_ColorPicker.prototype.hideColorMap = function() \n{\n if(this.colorMap){\n this.colorMap.style.display = "none";\n }\n}\n\n\napl_wikibar_ColorPicker.prototype.moveColorMap = function(theTarget)\n{\n try{\n\n var cm = this.colorMap; \n if(!cm) return;\n \n var rootLeft = findPosX(theTarget);\n var rootTop = findPosY(theTarget);\n var rootHeight = theTarget.offsetHeight;\n \n var popupLeft = rootLeft;\n var popupTop = rootTop + rootHeight;\n \n var popupWidth = cm.offsetWidth;\n \n var winWidth = findWindowWidth();\n if(popupLeft + popupWidth > winWidth)\n popupLeft = winWidth - popupWidth;\n \n cm.style.left = popupLeft + "px";\n cm.style.top = popupTop + "px";\n cm.style.display = "block";\n \n// window.scrollTo(0,y); // some bugs here\n \n }catch(ex){\n alert('moveColorMap(): '+ex.description);\n }\n}\n\napl_wikibar_ColorPicker.prototype.createColorMap = function() \n{\n try{ \n\n if(!this.theAction) return;\n \n if(this.colorMap) return;\n \n // create div\n this.colorMap = document.createElement("div");\n this.colorMap.setAttribute("id","colorMap");\n this.colorMap.setAttribute("style","display:none; position:absolute; left:0px; top:0px; z-index:99; margin:0px; padding:0px; cursor:crosshair;");\n document.body.appendChild(this.colorMap);\n\n // create table\n var theTable = document.createElement("table");\n theTable.setAttribute("cellspacing", 0);\n theTable.setAttribute("cellpadding", 0);\n theTable.setAttribute("style", "border:solid 1px black;");\n this.colorMap.appendChild(theTable);\n \n // create tr/td\n cellsPerRow = 16;\n var theTR=null;\n for(i=0; i<this.colorTable.length; i++){\n // create new row\n if((i%cellsPerRow)==0){ // 16x16\n theTR = document.createElement("tr");\n theTable.appendChild(theTR);\n }\n\n var theTD = document.createElement("td");\n if(this.colorTable[i].trim() == '')\n theTD.setAttribute("bgcolor", "white");\n else\n theTD.setAttribute("bgcolor", this.colorTable[i]);\n theTD.setAttribute("style", "border:solid 1px black;");\n theTD.onclick = this.theAction;\n theTD.innerHTML = '<span style="font-size:8px">&nbsp;&nbsp;&nbsp;</span>';\n theTR.appendChild(theTD);\n }\n \n // bottom row\n theTR = document.createElement("tr");\n theTable.appendChild(theTR);\n var theTD = document.createElement("td");\n theTD.setAttribute("bgcolor", "white");\n theTD.setAttribute("style", "border:solid 1px black;");\n theTD.setAttribute("colspan",cellsPerRow);\n theTD.onclick = function(){ if(apl_wikibar_colorPicker) apl_wikibar_colorPicker.hideColorMap(); };\n theTD.innerHTML = '<center><span style="font-size:10px;">close</span></center>';\n theTR.appendChild(theTD);\n \n }catch(ex){\n alert('createColorMap: '+ex.description);\n }\n \n}\n\n//------------------------------------------------------------------------------------------------\n// do on select a color\n//------------------------------------------------------------------------------------------------\nfunction apl_wikibar_onSelectColor(e) \n{\n \n if (!e) var e = window.event;\n var theTarget = resolveTarget(e); //<span>\n if(!theTarget) return(false);\n\n try{\n\n if(!apl_wikibar_colorPicker) return;\n \n apl_wikibar_colorPicker.hideColorMap();\n\n // get the color \n theTD = theTarget.parentNode;\n color = theTD.getAttribute("bgcolor");\n if(!color) return;\n \n if(apl_wikibar_colorPicker.targetSyntax && apl_wikibar_colorPicker.targetEditor)\n apl_wikibar_colorPicker.targetSyntax.format(apl_wikibar_colorPicker.targetEditor, color);\n \n }catch(ex){\n alert('apl_wikibar_onSelectColor: '+ex.description);\n } \n \n e.cancelBubble = true;\n if (e.stopPropagation) e.stopPropagation();\n return(false);\n \n}\n\n\n//------------------------------------------------------------------------------------------------\n// global variables: color picker\n//------------------------------------------------------------------------------------------------\nvar apl_wikibar_colorPicker = new apl_wikibar_ColorPicker(apl_wikibar_onSelectColor);\n\n//------------------------------------------------------------------------------------------------\n// global variables: syntax object\n// \n// parameter syntax: %1,%2,... - parameter needed, [%1] - optional parameter\n// %N - more than one parameter(1~n)\n// [%N] - any parameter(0~n)\n//------------------------------------------------------------------------------------------------\nvar apl_wikibar_syntaxes = {\n formattings: [\n {\n name: "ignore",\n tip: "ignore wiki word",\n symbol: "~",\n syntax: "~user_text",\n hint: "wiki_word",\n format: apl_wikibar_formatByWord\n },\n {\n name: "bold",\n tip: "bolder text",\n symbol: "<strong>B</strong>",\n syntax: "''user_text''",\n hint: "bold_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "italic",\n tip: "italic text",\n symbol: "<em>I</em>",\n syntax: "//user_text//",\n hint: "italic_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "underline",\n tip: "underline text",\n symbol: "<u>U</u>",\n syntax: "__user_text__",\n hint: "underline_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "strike",\n tip: "strikethrough text",\n symbol: "<strike>S</strike>",\n syntax: "==user_text==",\n hint: "strikethrough_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "sup",\n tip: "superscript text",\n symbol: "X<sup>2</sup>",\n syntax: "^^user_text^^",\n hint: "superscript_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "sub",\n tip: "subscript text",\n symbol: "X<sub>2</sub>",\n syntax: "~~user_text~~",\n hint: "subscript_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "comment",\n tip: "comment text",\n symbol: "/%",\n syntax: "/%user_text%/",\n hint: "comment_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "monospaced",\n tip: "monospaced text",\n symbol: "<code>mono</code>",\n syntax: "{{{user_text}}}",\n hint: "monospaced_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "line",\n tip: "horizontal line",\n symbol: "&mdash;",\n syntax: "\sn----\sn",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "crlf",\n tip: "line break",\n symbol: "&para;",\n syntax: "\sn",\n format: apl_wikibar_formatByCursor\n }\n ], // formattings\n colors: [\n {\n name: "highlight",\n tip: "highlight text",\n syntax: "@@user_text@@",\n hint: "highlight_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "color",\n tip: "text color",\n hint: "your_text",\n syntax: "@@color(%1):user_text@@",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getColorCode\n },\n {\n name: "bgcolor",\n tip: "background color",\n hint: "your_text",\n syntax: "@@bgcolor(%1):user_text@@",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getColorCode\n },\n {\n name: "colorcode",\n tip: "insert colorcode",\n syntax: "%1",\n format: apl_wikibar_formatByCursor,\n needParam: apl_wikibar_getColorCode\n } \n ], // colors\n lists:[\n {\n name: "bullet",\n tip: "bullet point",\n syntax: "*user_text",\n hint: "bullet_text",\n format: apl_wikibar_formatByLine\n },\n {\n name: "numbered",\n tip: "numbered list",\n syntax: "#user_text",\n hint: "numbered_text",\n format: apl_wikibar_formatByLine\n }\n ], // lists\n headings:[\n {\n name: "Heading 1",\n tip: "Heading 1",\n syntax: "!user_text",\n hint: "heading_1",\n format: apl_wikibar_formatByLine\n },\n {\n name: "Heading 2",\n tip: "Heading 2",\n syntax: "!!user_text",\n hint: "heading_2",\n format: apl_wikibar_formatByLine\n },\n {\n name: "Heading 3",\n tip: "Heading 3",\n syntax: "!!!user_text",\n hint: "heading_3",\n format: apl_wikibar_formatByLine\n },\n {\n name: "Heading 4",\n tip: "Heading 4",\n syntax: "!!!!user_text",\n hint: "heading_4",\n format: apl_wikibar_formatByLine\n },\n {\n name: "Heading 5",\n tip: "Heading 5",\n syntax: "!!!!!user_text",\n hint: "heading_5",\n format: apl_wikibar_formatByLine\n }\n ], // headings\n paragraphs:[\n {\n name: "comment by line",\n tip: "line comment",\n syntax: "/%user_text%/",\n hint: "comment_text",\n format: apl_wikibar_formatByLine\n },\n {\n name: "comment by block",\n tip: "block comment",\n syntax: "/%\snuser_text\sn%/",\n hint: "comment_text",\n byBlock: true, \n format: apl_wikibar_formatByLine\n },\n {\n name: "monospaced by line",\n tip: "line monospaced",\n syntax: "{{{\snuser_text\sn}}}",\n hint: "monospaced_text",\n format: apl_wikibar_formatByLine\n },\n {\n name: "monospaced by block",\n tip: "block monospaced",\n syntax: "{{{\snuser_text\sn}}}",\n hint: "monospaced_text",\n byBlock: true,\n format: apl_wikibar_formatByLine\n },\n {\n name: "quote by line",\n tip: "line quote",\n syntax: ">user_text",\n hint: "quote_text",\n format: apl_wikibar_formatByLine\n },\n {\n name: "quote by block",\n tip: "block quote",\n syntax: "<<<\snuser_text\sn<<<",\n hint: "quote_text",\n byBlock: true, \n format: apl_wikibar_formatByLine\n }\n ], // paragraphs\n links:[\n {\n name: "wiki",\n tip: "wiki link",\n syntax: "[[user_text]]",\n hint: "wiki_word",\n format: apl_wikibar_formatByWord\n },\n {\n name: "pretty",\n tip: "pretty link",\n syntax: "[[user_text|%1]]", \n hint: "pretty_word",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getLinkUrl,\n param: "PrettyLink Target"\n },\n {\n name: "url",\n tip: "url link",\n syntax: "[[user_text|%1]]", \n hint: "your_text",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getLinkUrl,\n param: "http://..."\n },\n {\n name: "image",\n tip: "image link",\n syntax: "[img[user_text|%1]]", \n hint: "alt_text",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getLinkUrl,\n param: "image/icon.jpg"\n }\n ], // links\n plugins:[\n {\n name: "codes area",\n tip: "block monospaced for plugin",\n syntax: "//{{{\snuser_text\sn//}}}",\n hint: "monospaced_plugin_text",\n byBlock: true,\n format: apl_wikibar_formatByLine\n }, \n {\n name: "comment by line",\n tip: "line comment",\n syntax: "//user_text",\n hint: "plugin_comment",\n format: apl_wikibar_formatByLine\n },\n {\n name: "comment by block",\n tip: "block comment",\n syntax: "/***\snuser_text\sn***/",\n hint: "plugin_comment",\n byBlock: true,\n format: apl_wikibar_formatByLine\n }\n ], // plugins\n tables:[\n {\n name: "table",\n tip: "create a new table",\n syntax: "\sn%1\sn",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getTableRowCol\n },\n {\n name: "table header",\n tip: "table header text",\n syntax: "|user_text|c",\n hint: "table_header",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "cell",\n tip: "create a tabel cell",\n syntax: "|user_text|",\n hint: "your_text",\n format: apl_wikibar_formatByWord\n },\n {\n name: "column header",\n tip: "create a column header cell",\n syntax: "|!user_text|",\n hint: "column_header",\n format: apl_wikibar_formatByWord\n },\n {\n name: "cell bgcolor",\n tip: "cell bgcolor",\n syntax: "|bgcolor(%1):user_text|",\n hint: "your_text",\n format: apl_wikibar_formatByTableCell,\n needParam: apl_wikibar_getColorCode\n },\n {\n name: "align left",\n tip: "add a tabel cell",\n syntax: "|user_text|",\n hint: "your_text",\n format: apl_wikibar_formatByTableCell\n },\n {\n name: "align center",\n tip: "add a tabel cell",\n syntax: "| user_text |",\n hint: "your_text",\n format: apl_wikibar_formatByTableCell\n },\n {\n name: "align right",\n tip: "add a tabel cell",\n syntax: "| user_text|",\n hint: "your_text",\n format: apl_wikibar_formatByTableCell\n }\n ], // tables\n macros:[\n {\n name: "allTags",\n tip: "allTags",\n syntax: "<<allTags>>",\n format: apl_wikibar_formatByWord\n },\n {\n name: "closeAll",\n tip: "closeAll",\n syntax: "<<closeAll>>",\n format: apl_wikibar_formatByWord\n },\n {\n name: "gradient",\n tip: "gradient",\n syntax: "<<gradient vert #ffffff %1>>user_text>>",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getColorCode\n },\n {\n name: "list",\n tip: "list",\n syntax: "<<list>>",\n format: apl_wikibar_formatByWord\n },\n {\n name: "list missing",\n tip: "list missing",\n syntax: "<<list missing>>",\n format: apl_wikibar_formatByWord\n },\n {\n name: "list orphans",\n tip: "list orphans",\n syntax: "<<list orphans>>",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "newJournal",\n tip: "newJournal",\n syntax: "<<newJournal>>",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "newTiddler",\n tip: "newTiddler",\n syntax: "<<newTiddler>>",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "option",\n tip: "option",\n syntax: "<<option %1>>[%2]\sn",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getMacroParam,\n param: 'chkOpenInNewWindow "Open link in new window"'\n }, \n {\n name: "permaview",\n tip: "permaview",\n syntax: "<<permaview>>",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "saveChanges",\n tip: "saveChanges",\n syntax: "<<saveChanges>>",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "search",\n tip: "search",\n syntax: "<<search>>",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "slider",\n tip: "slider",\n syntax: "<<slider %1 %2 %3>>",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getMacroParam,\n param: "sliderID sliderTiddler sliderLabel"\n }, \n {\n name: "sparkline",\n tip: "sparkline",\n syntax: "<<sparkline %N>>", \n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getMacroParam,\n param: "number_list(ex: 100 123 ...)"\n }, \n {\n name: "tabs",\n tip: "tabs",\n syntax: "<<tabs [%N]>>",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getMacroParam,\n param: "indentifier tabLabel tabName Tiddler"\n }, \n {\n name: "tag",\n tip: "tag",\n syntax: "<<tag %1>>",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getMacroParam,\n param: "tagName(ex: systemConfig)"\n }, \n {\n name: "tiddler",\n tip: "tiddler",\n syntax: "<<tiddler %1>>",\n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getMacroParam,\n param: "Tiddler"\n }, \n {\n name: "timeline",\n tip: "timeline",\n syntax: "<<timeline>>",\n format: apl_wikibar_formatByWord\n }, \n {\n name: "today",\n tip: "today",\n syntax: "<<today [%1]>>", \n format: apl_wikibar_formatByWord,\n needParam: apl_wikibar_getMacroParam,\n param: '"YYYY/MM/DD hh:mm:ss"'\n }, \n {\n name: "version",\n tip: "version",\n syntax: "<<version>>",\n format: apl_wikibar_formatByWord\n }\n ], // macros\n dates:[\n {\n name: "YYYY",\n tip: "full year",\n syntax: "YYYY",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "YY",\n tip: "2-digit year",\n syntax: "YY",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "MMM",\n tip: "month name",\n syntax: "MMM",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "MM",\n tip: "month",\n syntax: "MM",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "0MM",\n tip: "zero-leading month",\n syntax: "0MM",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "DDD",\n tip: "week day",\n syntax: "DDD",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "DD",\n tip: "day",\n syntax: "DD",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "0DD",\n tip: "zero-leading day",\n syntax: "0DD",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "hh",\n tip: "hour",\n syntax: "hh",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "mm",\n tip: "minute",\n syntax: "mm",\n format: apl_wikibar_formatByCursor\n },\n {\n name: "ss",\n tip: "second",\n syntax: "ss",\n format: apl_wikibar_formatByCursor\n } \n ], // dates\n htmls:[\n {\n name: "<html>",\n tip: "html tag",\n syntax: "<html>\snuser_text\sn</html>",\n hint: "html_content",\n byBlock: true,\n format: apl_wikibar_formatByLine\n }\n ] // htmls\n};\n\n\n//}}}
WikiBarPlugin 是由 Arphen Lin 調製的外掛程式。他提供一個編輯工具列,上面有 TiddlyWiki 大部份的語法格式按鈕,直接使用這些工具列按鈕就可以輸入 wiki 語法,讓你不必死記一堆 wiki 語法格式,超級方便。\n\n>官方網站展示: http://efms.emome.net/Web/Map/tiddlywiki/wikibar_demo.html\n>官方下載: http://sourceforge.net/project/showfiles.php?group_id=150861\n\n<<tiddler 安裝擴充套件提示>>
WikiWord 是由兩個或兩個以上的英文單字連在一起所組成,而且每個英文單字的第一個字母必須是大寫。
!說明\n這個[[巨集]]在不需要任何繪圖函式庫的情形下,可以畫出水平漸層或垂直漸層背景色的文字標題。\n!用法\n{{{\n<<gradient vert #ffffff #ffdddd #ff8888>>垂直漸層背景色>>\n<<gradient horiz #ff8888 #ffdddd #ffffff>>水平漸層背景色>>\n}}}\n!效果\n<<gradient vert #ffffff #ffdddd #ff8888>>垂直漸層背景色>>\n<<gradient horiz #ff8888 #ffdddd #ffffff>>水平漸層背景色>>
!說明\n這個[[巨集]]會依字母順序將所有的 Tiddler 連結列出。中文的 Tiddler 標題大概是依中文字編碼順序排序的吧!\n!用法\n{{{\n<<list>>\n}}}\n!效果\n<<list>>
!說明\n建立一個''新增日誌''的超連結,藉由這個超連結,我們可以創建新的 Tiddler ,並直接產生日期組成的標題。適合用來建立日誌式的 Tiddler 。[[主選單]]裡的<<newJournal 'DD MM YYYY'>>便是用這個內建[[巨集]]產生的。\n!用法\n{{{\n<<newJournal 'DD MM YYYY'>>\n}}}\n!效果\n<<newJournal 'DD MM YYYY'>>
!說明\n建立一個''發表文章''的超連結,藉由這個超連結,我們可以創建新的 Tiddler 。[[主選單]]裡的<<newTiddler>>便是用這個內建[[巨集]]產生的。\n!用法\n{{{\n<<newTiddler>>\n}}}\n!效果\n<<newTiddler>>
!說明\n這個[[巨集]]的功能很好玩,可以把一個 Tiddler 製作成''滑動式方塊'',用滑鼠點選產生的連結,可以滑動式的展開或收合 Tiddler 的內容。\n!用法\n{{{\n<<slider chkSlider '如何做...' '如何做…' '所有如何做… Tiddler 列表'>>>\n}}}\n*slider:這個巨集的名稱。\n*chkSlider:用來儲存 slider 是展開或收合狀態的瀏覽器 cookie 變數名稱。\n*第一個"如何做…": Tiddler 的標題。\n*第二個"如何做…": 產生的連結上顯示的文字。\n*'所有……':滑鼠停在 slider 連結上時會顯示在游標右下角的說明文字。\n!效果\n<<slider chkSlider 如何做… 如何做… '所有如何做… Tiddler 列表'>>
!說明\n這個[[巨集]]功能非常強大,可以讓我們建立''分頁標籤''式的頁面,每個分頁標籤負責顯示一個 Tiddler 的內容。相對地,用法也比較複雜一點。(一點點而已啦!)\n!用法\n{{{\n<<tabs tabsClass\n如何做系列 '列出所有如何做…系列的文章' 如何做…\n介紹巨集 '介紹內建巨集的功能' 巨集\n>>\n}}}\n*第一行\n**tabsClass 是用來顯示分頁標籤效果的 CSS 樣式定義類別。可以在 StyleSheet 裡自行定義。\n*其它行(以第二行為例說明)\n**如何做系列:產生的分頁標籤上的文字,當做標題使用。\n**'列出所有........':當滑鼠停在分頁標籤上時顯示在游標右下角的說明文字。\n**如何做…:這個分頁標籤要顯示的 Tiddler 。\n!效果\n<<tabs tabsClass\n如何做系列 '列出所有如何做…系列的文章' 如何做…\n介紹巨集 '介紹內建巨集的功能' 巨集\n>>
!說明\n產生一個下拉選單,列出屬於某個標籤的所有 Tiddler ,並可直接開啟 Tiddler 或將該標籤的所有 Tiddler 一次全部開啟。\n!用法\n{{{\n<<tag howto>>\n}}}\n!效果\n產生 "howto" 標籤的 Tiddler 選單<<tag howto>>
!說明\n這個[[巨集]]讓我們引用其它 Tiddler 的內容。我們可以用 Tiddler 隨時記下小段落的內容,最後再利用這個[[巨集]]將所有的 Tiddler 組織成一篇文章而不用將他們重寫。像在[[如何建立一個 Tiddler|Tiddler]]裡面,我們就利用這個巨集引用了 FreeLink 這個 Tiddler 。\n!用法\n{{{\n<<tiddler 歡迎>>\n}}}\n!效果\n以下引用[[歡迎]]這個 Tiddler 的內容:\n><<tiddler 歡迎>>
!說明\n顯示目前的時間。\n!用法\n{{{\n<<today>>\n}}}\n!效果\n現在是 <<today>>
!說明\n這個[[巨集]]的功能很簡單,用來顯示目前使用的 TiddlyWiki 的版本號碼。\n!用法\n{{{\n<<version>>\n}}}\n!效果\n目前使用的 TiddlyWiki 版本為:<<version>>
// // ''套件:'' zh_TW\n// // ''功能:'' TiddliWiki 介面中文化\n// // ''作者:'' Bram Chen\n// // ''版本:'' 1.2.37 (2005/10/28)\n// // ''說明:''\n// // Oct 28, 2005: 1 新增 config.messages.shadowedTiddlerToolTip\n// // 2.新增 config.macros.list.shadowed.prompt\n// // 3.修改 config.views.wikified.tag\n{{{\nversion.extensions.zh_TW = {major: 1, minor: 2, revision: 37, date: new Date("Oct 28, 2005")};\n// // ''Messages''\nconfig.messages= {\n customConfigError: "customConfig 錯誤 - '%1' - %0",\n savedSnapshotError: "此 TiddlyWiki 未正確存檔,詳見 http://www.tiddlywiki.com/#DownloadSoftware",\n subtitleUnknown: "(未知)",\n undefinedTiddlerToolTip: "'%0' 尚無內容",\n externalLinkTooltip: "外部連結至 %0",\n shadowedTiddlerToolTip: "'%0' 尚無內容, 但已定義隱藏的預設值",\n noTags: "未設定標籤的文章",\n notFileUrlError: "須先將此 TiddlyWiki 存至檔案,才可儲存變更",\n cantSaveError: "此瀏覽器無法儲存變更,建議使用FireFox",\n invalidFileError: " '%0' 非有效之 TiddlyWiki",\n backupSaved: "已儲存備份",\n backupFailed: "無法儲存備份",\n rssSaved: "RSS feed 已儲存",\n rssFailed: "無法儲存 RSS feed ",\n emptySaved: "已儲存範本",\n emptyFailed: "無法儲存範本",\n mainSaved: "主要的TiddlyWiki已儲存",\n mainFailed: "無法儲存主要 TiddlyWiki. 所作的改變未儲存",\n macroError: "macro執行錯誤 '%0'",\n overwriteWarning: "'%0' 已存在,[確定]覆寫之",\n unsavedChangesWarning: "注意! 尚未儲存變更\sn\sn[確定]存檔,或[取消]放棄存檔?",\n dates: {\n months: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],\n days: ["日", "一","二", "三", "四", "五", "六"]\n }\n };\nconfig.views = {\n wikified: {\n tag: {labelNoTags: "未設標籤", labelTags: "標籤: ", tooltip: "顯示標籤為 '%0' 的文章", openAllText: "開啟以下所有文章", openAllTooltip: "開啟標籤為 '%0' 的文章", popupNone: "僅此文標籤為 '%0'"},\n toolbarClose: {text: "關閉", tooltip: "關閉本文"},\n toolbarEdit: {text: "編輯", tooltip: "編輯本文"},\n toolbarPermalink: {text: "引用連結", tooltip: "本文引用連結"},\n toolbarReferences: {text: "引用", tooltip: "引用本文的文章", popupNone: "本文未被引用"},\n defaultText: ""\n },\n editor: {\n tagPrompt: "設定標籤之間以空白區隔,[[標籤含空白時請使用雙中括弧]],或點選現有之標籤加入",\n tagChooser: {text: "標籤", tooltip: "點選現有之標籤加至本文章", popupNone: "未設定標籤", tagTooltip: "加入標籤 '%0'"},\n toolbarDone: {text: "完成", tooltip: "確定修改"},\n toolbarCancel: {text: "取消", tooltip: "取消修改"},\n toolbarDelete: {text: "刪除", tooltip: "刪除文章"},\n defaultText: ""\n }\n };\n// // ''SiderBar''\nconfig.shadowTiddlers.SideBarOptions = "<<gradient vert #ffffff #cc9900>><<search>><<closeAll>><<permaview>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel 偏好設定 '變更 TiddlyWiki 選項'>>>>";\nconfig.shadowTiddlers.AdvancedOptions = "<<option chkOpenInNewWindow>> 連結開啟於新視窗\sn<<option chkSaveEmptyTemplate>> 儲存範本\sn<<option chkToggleLinks>> 點擊文章使已開啟者關閉\sn\sn<<option chkHttpReadOnly>> 隱藏編輯功能 ({{{http:}}})\sn<<option chkForceMinorUpdate>> 修改文章不變更日期時間\sn(確認修改同時按 Shift 鍵,或只按 Ctrl-Shift-Enter)";\nconfig.shadowTiddlers.OptionsPanel = "這些設定將暫存於瀏覽器中,\sn請簽名<<option txtUserName>>\sn (範例:WikiWord)\sn\sn <<option chkSaveBackups>> [[儲存備份]]\sn<<option chkAutoSave>> [[自動儲存]]\sn<<option chkGenerateAnRssFeed>> [[產生 RssFeed]]\sn<<option chkRegExpSearch>> [[正規式搜尋]]\sn<<option chkCaseSensitiveSearch>> [[區分大小寫搜尋]]\sn<<option \snchkAnimate>> [[使用動畫顯示]]\sn\sn <<slider sliderAdvancedOptions AdvancedOptions 進階選項 '進階選項'>>";\nconfig.shadowTiddlers.SideBarTabs = "<<tabs txtMainTab 最近更新 '依更新日期排序' TabTimeline 全部 '所有文章' TabAll 分類 '依標籤分類' TabTags 更多 '其他' TabMore>>";\nconfig.shadowTiddlers.TabMore = "<<tabs txtMoreTab 未完成 '內容空白的文章' TabMoreMissing 未引用 '未被引用的文章' TabMoreOrphans>>";\nconfig.shadowTiddlers.SliderTimeline = "<<slider sliderTimeline TabTimeline 最近更新 '最近更新的文章'>>";\nconfig.macros.search.label = " 尋找";\nconfig.macros.search.prompt = "搜尋本 Wiki";\nconfig.macros.search.sizeTextbox = 15;\nconfig.macros.search.accessKey = "F";\nconfig.macros.search.successMsg = " %0 篇符合條件";\nconfig.macros.search.failureMsg = " 無符合條件";\nconfig.macros.timeline.dateFormat = "YYYY0MM0DD";\nconfig.macros.allTags.tooltip = "顯示文章- 標籤為'%0'";\nconfig.macros.allTags.noTags = "沒有標籤的文章";\nconfig.macros.list.all.prompt = "依字母排序";\nconfig.macros.list.missing.prompt = "被引用且內容空白的文章";\nconfig.macros.list.orphans.prompt = "未被引用的文章";\nconfig.macros.list.shadowed.prompt = "這些隱藏的文章已定義預設內容";\n// // ''ToolsBar''\nconfig.macros.closeAll.label = "全部關閉";\nconfig.macros.closeAll.prompt = "關閉所有開啟中的 tiddler (編輯中除外)";\nconfig.macros.saveChanges.label = "儲存變更";\nconfig.macros.saveChanges.prompt = "儲存所有文章,產生新的版本";\nconfig.macros.permaview.label = "引用連結";\nconfig.macros.permaview.prompt = "可存取現有開啟之文章的連結位址";\nconfig.macros.newTiddler.label = "發表文章";\nconfig.macros.newTiddler.prompt = "新增 tiddler";\nconfig.macros.newJournal.label = "新增日誌";\nconfig.macros.newJournal.prompt = "新增 jounal";\n// // ''Date formatString''\nDate.prototype.formatString = function(template)\n{\n template = template.replace(/YYYY/g,this.getFullYear() + '年');\n template = template.replace(/YY/g,String.zeroPad(this.getFullYear()-1911,2) + '年');\n template = template.replace(/MMM/g,config.messages.dates.months[this.getMonth()] + '月');\n template = template.replace(/0MM/g,String.zeroPad(this.getMonth()+1,2) + '月');\n template = template.replace(/MM/g,this.getMonth()+1 + '月');\n template = template.replace(/DDD/g,'星期'+config.messages.dates.days[this.getDay()]);\n template = template.replace(/0DD/g,String.zeroPad(this.getDate(),2)+ '日');\n template = template.replace(/DD/g,this.getDate() + '日');\n template = template.replace(/hh/g,this.getHours());\n template = template.replace(/mm/g,this.getMinutes());\n template = template.replace(/ss/g,this.getSeconds());\n return template;\n};\n}}}
左側主選單的內容,同樣是放在一個特殊的 Tiddler 裡: MainMenu 。這讓我們修改網站選單時變得非常容易。\n\n關於如何修改一個 Tiddler 的內容,這裡就不再廢話了。我們把重點放在主選單該放些什麼?\n\n主選單裡應該放的是連結,包括連至網站的其它內容,當然就是 Tiddler 了;還有就是其它網站的超連結。\n\n如何連至一個 Tiddler ,請參考[[如何建立一個 Tiddler]]。要連至其它網站,請參考[[如何建立外部連結]]。
截至目前為止,你已經開啟了兩篇文章。像這樣的文章段落,在 TiddlyWiki 裡把他稱為 Tiddler 。所謂 Tiddler ,可以把他看成是一小段資訊,或是 MicroContent 。整個 TiddlyWiki 網站就是由許許多多的 Tiddler 組成的。每個 Tiddler 都是一個可以開啟、編輯的超連結。我們可以用 Tiddler 紀錄下簡短的事項或短文章,再由相關的 Tidder 組織成所要的完整內容。\n\n除了 Tiddler 之外, TiddlyWiki 還有[[容易攜帶]]和[[容易編輯]]的特點。這些特點讓 TiddlyWiki 更具威力。
對使用 FireFox 的使用者來說,[[儲存變更]]很容易,你只有在第一次儲存的時候會遇到一個彈出式視窗如下:\n\n[img[images/save-in-fx.png]]\n\n此時,選''允許''按鈕就可以存檔。若要省略 FireFox 的每次詢問,只要將''記住此決定''選項打勾就行了。\n----\n對 IE 的使用者來說,要[[儲存變更]]也不難,同樣地,在儲存時會跳出一個視窗如下:\n\n[img[images/save-in-ie.png]]\n\n按下''確定''鈕就可以[[儲存變更]]了。
製作段落的[[列表]]是 TiddlyWiki 裡最容易的事情之一。列表分成兩種,分別說明如下:\n\n在任何一行的第一個字元加上星號(*),則可以做項目符號列表。如果使用了一個以上的星號,還可以做成階層式具縮排功能的列表。範例如下:\n\n*第一層、第一項。\n*第一層、第二項。\n**第二層、第一項。\n***第三層、第一項。\n***第三層、第二項。\n**第二層、第二項。\n*第一層、第三項。\n\n上面範例的寫法如下:\n{{{\n*第一層、第一項。\n*第一層、第二項。\n**第二層、第一項。\n***第三層、第一項。\n***第三層、第二項。\n**第二層、第二項。\n*第一層、第三項。\n}}}\n----\n如果要做成編號列表的話,把星號換成井字號(#)即可。記得,要從每行的第一個字元開始。下面是範例:\n#第一層、第一項。\n#第一層、第二項。\n##第二層、第一項。\n###第三層、第一項。\n###第三層、第二項。\n##第二層、第二項。\n#第一層、第三項。\n\n上面範例的寫法如下:\n{{{\n#第一層、第一項。\n#第一層、第二項。\n##第二層、第一項。\n###第三層、第一項。\n###第三層、第二項。\n##第二層、第二項。\n#第一層、第三項。\n}}}\n----\n兩種列表可不可以混著用?當然可以,看範例最快:\n\n*第一層、第一項。\n*第一層、第二項。\n##第二層、第一項。\n***第三層、第一項。\n***第三層、第二項。\n##第二層、第二項。\n*第一層、第三項。\n\n上面範例的寫法如下:\n{{{\n*第一層、第一項。\n*第一層、第二項。\n##第二層、第一項。\n***第三層、第一項。\n***第三層、第二項。\n##第二層、第二項。\n*第一層、第三項。\n}}}\n\n混合使用時要注意一點,不論換用項目符號列表還是編號列表,要謹記''在第幾層就使用幾個星號或井字號''的原則。
一般網頁上所使用的字體是屬於調合字,每個字的寬度不一定相等。例如說字母 i 就比字母 w 窄。而[[固定字]]是指每個字的寬度都一樣,像接下來的{{{字母 i 就與字母 w 等寬}}}。\n\n要產生[[固定字]]的方法很簡單,只在在固定字的前後加上三個大括弧即可。如果用單獨一行的三個左大括弧和右大括弧,則其中的文字還會有縮排並醒目的樣式。\n\n固定字在 TiddlyWiki 裡還有一個很重要的功能,就是使[[巨集]]和各種的 wiki 語法失效。所以,在很多關於如何…的 Tiddler 裡,都是使用這種方法來顯示各種 wiki 語法的用法。下面是一個使[[巨集]]失效的例子。\n{{{\n<<today>>\n}}}
要連結到網際網路上,只要打上完整的網址,系統會自動處理成超連結。或者,使用 FreeLink 的方式也可以,只要把 Tiddler 的名稱換成網址的 URL 即可。請看下面的範例:\n\nhttp://www.tiddly.com\n[[一般網址|http://www.tiddly.com]]\n[[相對網址|path/filename]]\n[[Windows 的網路芳鄰|file://server/share/path/file]]\n[[Windows 的本機檔案|file:///c:/path/file]]\n[[Unix-style 的本機檔案|file:///path/file]]\n\n以上範例的寫法:\n{{{\nhttp://www.tiddly.com\n[[一般網址|http://www.tiddly.com]]\n[[相對網址|path/filename]]\n[[Windows 的網路芳鄰|file://server/share/path/file]]\n[[Windows 的本機檔案|file:///c:/path/file]]\n[[Unix-style 的本機檔案|file:///path/file]]\n}}}
有時候,滿篇的 Tiddler 連結,會讓人看得眼花瞭亂。為了版面的乾淨,我們不需要到處都是 ~WiKiWord 。那麼要如何讓 Tiddler 連結失效呢?你注意到了嗎?在這一個 Tiddler 裡,我讓 ~WikiWord 失效了。\n\n答案是:在 ~WikiWord 前面加上一個 ~ (蝌蚪符號)。像下面這樣:\n{{{\n~WikiWord\n}}}\n\n另外, ~FreeLink 形式的 Tiddler 連結,只要我們不使用中括弧,就不會產生 Tiddler 了。
*[[如何開始]]\n*[[如何建立一個 Tiddler|Tiddler]]\n*[[如何格式化文字|格式化文字]]\n*[[如何插入圖檔|插入圖檔]]\n*[[如何建立列表|列表]]\n*[[如何建立外部連結|外部連結]]\n*[[如何建立表格|表格]]\n*[[如何建立標題|標題]]\n*[[如何使用縮排|縮排]]\n*[[如何插入水平線|水平線]]\n*[[如何使用樣式|樣式]]\n*[[如何使 WikiWord 失效]]\n*[[如何使用固定字|固定字]]\n*[[如何使用註解|註解]]^^1.2.37 版新增功能^^\n*[[如何使用 HTML 語法|HTML語法支援]]^^1.2.37 版新增功能^^\n*[[如何把 Tiddler 加上標籤|標籤]]\n*[[如何使用巨集|巨集]]\n*[[如何更新版本|更新]]\n/%\n----\n<<listTags 如何做系列 modified *>>\n%/
首先,當然要先取得一份 TiddlyWiki 的檔案。請對「[[新的檔案|empty.html]]」按滑鼠右鍵,選擇''連結另存新檔''( FireFox )或''另存目標''( IE ),將檔案存在你的電腦裡。「我的文件」會是個不錯的地方。\n\n請注意:''存檔位置的完整路徑不可以包含任何中文或亞洲語系的名稱'',這是唯一的限制。\n\n就這樣,安裝完成了。沒錯,就是這麼簡單。\n\n接下來你可以將他的主檔名 empty 改成任何你想使用的檔名。同樣地,''請不要使用中文檔名''。副檔名則不需要做任何的修改。\n\n安裝完畢之後,你可以做網站的外觀設定,包括:\n[[設定網站標題|網站標題]]、[[設定網站副標題|網站副標題]]、[[設定網站預設顯示的 Tiddler|首頁預設 Tiddler]]、[[修改左側主選單|主選單]];最後,當然是將所有的修改做[[儲存變更]]。
如果你不知道如何安裝擴充套件,請參考[[新增擴充套件]]裡的說明,依步驟進行安裝。
如同前面所介紹的,功能強大的 TiddlyWiki 全部只需要一個小小的檔案(約 100 多 KB),放在隨身碟裡,就可以隨身攜帶,在任何有瀏覽器的電腦裡使用。甚至,我們還可以把 FireFox 也一起安裝在隨身碟裡(約佔 5 MB),讓攜帶與使用更加方便。\n\n但是這裡有一個小小的例外,儲存在 TiddlyWiki 裡的部份只有''文字'',插入的圖檔或其它多媒體檔案則是外加的。詳細情形請看[[顯示圖片]]教學部份。
試試看在這個 Tiddler 的標題上快按滑鼠左鍵兩次。現在,進入了這個 Tiddler 的編輯模式。接著,試著在編輯區裡修改內容,然後用滑鼠按一下 Tiddler 右上方的''完成'',這樣就完成一個 Tiddler 的編輯了。\n\n這樣是不是很''酷''!\n\n眼尖的你,應該也看到了。當滑鼠移入 Tiddler 範圍時,右上方會自動出現四個連結,用滑鼠點選上面的''編輯''也可以進入 Tiddler 的編輯模式。\n\n編輯完成,當然要存檔。你可以在[[如何開始]]課程裡找到[[儲存變更]]。\n\n接下來,我們以一連串的[[如何做…]]來進行 TiddlyWiki 的教學,包括:\n><<tiddler 如何做…>>
[[巨集]]是 TiddlyWiki 作者 Jeremy Ruston 新增的一個非常強大的功能。利用[[巨集]],我們可以在不修改任何原始碼的情況下加入新功能。在 TiddlyWiki 裡已經內建了很多有用的巨集。另外有很多玩家也在他們的 wiki 裡提供很多自家開發的巨集。像 [[MonkeyPirateTiddlyWiki|http://homes.jcu.edu.au/~ccscb/mptw/]] 和 [[TiddlerWiki|http://checketts.objectis.net/wiki/]]。在台灣, [[BramChen|http://bram.cozysite.com/ptw/]] 也不惶多讓的貢獻他所製作的巨集。\n\n以下列出 TiddlyWiki 內建的巨集:\n\n*[[today]]\n*[[tag]]\n*[[newJournal]]\n*[[newTiddler]]\n*[[tiddler]]\n*[[slider]]\n*[[version]]\n*[[list]]\n*[[tabs]]\n*[[Sparklines]]\n*[[gradient]]\n\n*[[自訂巨集]]
插入的圖檔最簡單的語法是像下面這樣:\n{{{\n[img[images/ham.gif]]\n}}}\n\n其中,images/ham.gif 是圖檔的路徑,示範的相對路徑是相對於 TiddlyWiki 的檔案所在位置,也就是說,images 目錄與 TiddlyWiki 是在同一個目錄裡,而 ham.gif 圖檔則是在 images 目錄底下。實際效果如下:\n[img[images/ham.gif]]\n\n插入圖檔還可以有下列各種變化:\n\n----\n加入圖檔的說明文字(title 屬性),試試把滑鼠游標停在圖片上,游標的右下方會出現//感動的哈姆太郎//文字:\n{{{\n[img[感動的哈姆太郎|images/ham.gif]]\n}}}\n[img[感動的哈姆太郎|images/ham.gif]]\n\n補充: FireFox 和 IE 對 <img> 標籤的 title 屬性解釋不同。對 FireFox 來說, title 屬性是當圖檔無法顯示時用來取代圖檔的說明文字。如果要做成滑鼠游標說明文字的效果,則要使用 alt 屬性。這個部份 TiddlyWiki 目前沒有支援。也許向官方建議後可以納入未來版本的功能。\n----\n讓圖檔變成超連結,下例為連至 PHP 的官方網站:\n{{{\n[img[images/php-logo.gif][http://www.php.net]]\n}}}\n[img[php首頁|images/php-logo.gif][http://www.php.net]]\n----\n插入的圖檔還具有與文章段落做靠左或靠右的文繞圖功能:\n{{{\n[<img[哈姆太郎在左邊|images/ham.gif]]\n[>img[PHP Logo 在右邊|images/php-logo.gif]]\n}}}\n[<img[哈姆太郎在左邊|images/ham.gif]][>img[PHP Logo 在右邊|images/php-logo.gif]]在這個例子裡,可以看到感動的哈姆太郎在段落的左邊,而 PHP 的標幟則是在段落的右邊。至於靠左或靠右,則是由 img 前面的小於符號及大於符號決定。
自從 1.2.23 版起,TiddlyWiki 做了一次大幅的改版。這次的改版讓 Tidder 可以放入程式碼來擴充他的功能,於是乎網路上的 ~TiddlyWiki-er 基於各式各樣的需求,調配出了各式各樣的[[擴充套件]]。\n\n各種的[[擴充套件]]基本上可以分成[[外掛程式]](''Plugins'')和[[自訂巨集]](''Macros'')兩種。他們都是一些 JavaScript 程式,如果這些程式能直接擴充 TiddlyWiki 的功能,例如 WikiBarPlugin ,就稱為[[外掛程式]]。另外,如果是提供除了內建[[巨集]]之外的其它擴充的[[巨集]]功能,則稱為[[自訂巨集]]。\n\n<<tiddler 新增擴充套件>>
新增擴充套件的方法很簡單,因為這些[[擴充套件]]的程式碼都放在 Tiddler 裡,所以,只要在自己的 TiddlyWiki 裡面開啟一個新的 Tiddler ,將找到的擴充套件程式碼複製到裡面,再經過一點小設定就行了。詳細步驟說明如下:\n\n#找到你要的擴充套件,使用編輯功能進入 Tiddler ,將內容完全複製。\n#在自己的 TiddlyWiki 建立一個新的 Tiddler ,給它適當的標題,並將複製的程式碼貼入編輯區。\n#替這個 Tiddler @@color(#ff3300):加上 systemConfig 標籤@@。這個步驟超重要,絕對不能漏掉。\n#完成 Tiddler 編輯,''儲存變更''後,重新整理網頁。\n完成!此時擴充套件應該生效了。\n\n這裡特別精選了幾個擴充套件如下:\n|!擴充套件名稱|!擴充套件|!說明|\n|[[WikiBarPlugin 外掛]]|WikiBarPlugin|提供 Tiddler 編輯工具列,讓你編輯 Tiddler 時不必死記各種 wiki 語法。|\n|[[DisplayDefaultMacro 自訂巨集]]|DisplayDefaultMacro|建立一個超連結可以關閉所有開啟中的 Tiddler ,然後開啟 DefaultTiddlers 裡的所有 Tiddler 。|\n|[[ListTagsMacro 自訂巨集]]|ListTagsMacro|可以列出某個標籤的所有 Tiddler 連結。有了這個巨集, TiddlyWiki 的應用空間大大的提昇了。|\n|[[CalendarPlugin 自訂巨集]]|CalendarPlugin|產生一個年曆或月曆,並且每個日期都是一個 Tiddler 連結,可以應用在製作日誌方面。|
如同其它軟體一樣,TiddlyWiki 也會更新版本。就在最近,官方網站推出了新的 1.2.37 版本。新的版本會更正一些已經發現的問題,或是推出新功能。關於新版本的 ~ChangeLog ,都會固定在 http://www.tiddlywiki.com/dev 裡說明。\n\n要更新 TiddlyWiki ,請依照下面的步驟:\n\n#先確定''偏好設定''裡的''儲存備份''是否已經勾選?若沒有,記得要先勾選。\n#做''儲存變更''。這兩個步驟是為了萬一更新後有任何不正常的地方,可以由備分檔還原。\n#請參照[[如何開始]]裡的方法下載新版的 TiddlyWiki 。但是存檔時,@@color(#cc0000):請選擇覆寫目前正在使用的 TiddlyWiki 檔案@@。\n#下載完成後,再做一次''儲存變更'',然後重新整理一次網頁即可。\n\n<<tiddler 更新的原理>>
TiddlyWiki 在執行時,是把整個網頁檔案載入記憶體中執行。所以,當我們下載新版的 TiddlyWiki 並覆蓋舊版檔案時, TiddlyWiki 檔變成新版的程式而沒有任何的 Tiddler 。但是所有的 Tiddler 內容都還保留在記憶體中。此時,只要再做''儲存變更''便可以把記憶體裡的所有 Tiddler 內容再次寫回新版的 TiddlyWiki 檔案裡。\n\n這就是更新版本所用的原理,也是官方網站裡所提供的更新步驟。
TiddlyWiki 支援各種的文字格式處理:\n*在文字前後加上兩個單引號可以產生''粗體字''效果如下:\n{{{\n''粗體字''\n}}}\n\n*在文字前後加上兩個等號可以產生==刪除線==效果如下:\n{{{\n==加上刪除線==\n}}}\n\n*在文字前後加上兩個底線符號可以產生__底線文字__的效果如下:\n{{{\n__底線文字__\n}}}\n\n*在文字前後加上兩個斜線可以產生//斜體字//效果如下:\n{{{\n//斜體字//\n}}}\n\n*在文字前後加上兩個指數符號可以產生^^上標字^^效果如下:\n{{{\n^^上標字效果^^\n}}}\n\n*在文字前後加上兩個蝌蚪符號可以產生~~下標字~~效果如下:\n{{{\n~~下標字效果~~\n}}}\n\n*在文字前後加上兩個 at 符號,並使用 color(顏色代碼): ,可以替@@color(green):文字改變顏色@@,效果如下:\n{{{\n@@color(顏色代碼):文字@@\n}}}\n\n*同樣地,在文字前後加上兩個 at 符號,並使用 bgcolor(顏色代碼): ,可以替@@bgcolor(red):文字改變背景色@@,效果如下:\n{{{\n@@bgcolor(顏色代碼):文字@@\n}}}
標籤讓我們可以對 Tiddler 做目錄分類。我們可以在這個 Tiddler 下面看到 "Introduction" 和 "howto" 兩個標籤,由此可知, Tiddler 是可以有多個標籤的。\n\n另外,如果我們用滑鼠點選標籤,則會列出所有貼上這個標籤的 Tiddler 。你可以開啟其中一個 Tiddler ,或將它們一次全部開啟。\n\n要替 Tiddler 加上標籤,可以在編輯模式時,由下方的''標籤''連結選取所有現有的任何標籤加上,或是直接在標籤列輸入標籤名稱。是不是這樣就建立一個新的標籤了?沒錯,就是這樣。\n\n要注意,標籤與標籤之間要加上空格。如果籤包含空格,則比照 FreeLink 的方式,在前後加上兩個中括弧。\n\n另外,請參考[[特殊標籤]]。
這裡的[[標題]],是對應到 HTML 裡的 <H1> 到 <h5> 標籤。要建立標題很簡單,只要使用驚嘆號(!)即可。看範例最清楚:\n\n!標題 1\n!!標題 2\n!!!標題 3\n!!!!標題 4\n!!!!!標題 5\n\n{{{\n!標題 1\n!!標題 2\n!!!標題 3\n!!!!標題 4\n!!!!!標題 5\n}}}
你可能對 TiddlyWiki 預設的以白色和棕色為主的樣式有意見, TiddlyWiki 的網站配色採用 CSS 樣式表的方式處理。而修改的 CSS 代碼則可以放在 StyleSheet 這個特殊的 Tiddler 。完成後[[儲存變更]]並重新整理網頁便可以看到更新後的效果。\n\n關於 CSS 樣式修改並不包括在本站的教學內容。建議可以參觀 [[W3Schools|http://www.w3schools.com/css]] 的網站,裡面有很豐富的教學及參考資料。另外,也建議使用 FireFox 搭配 web developer plugin ,可以很快的找到要改的 CSS ID,蠻方便的。
歡迎來到 TiddlyWiki [[使用教學]]中文版。這個網站主要內容為翻譯自 [[TiddlyWikiTutorial|http://www.blogjones.com/TiddlyWikiTutorial.html]] 網站,加上個人的一些心得,為 TiddlyWiki 的基本使用教學。當然,你所看到的內容,全部都是只用 TiddlyWiki 所建立的,完全不需要任何其它的東西。\n\n如果你已經熟悉 TiddlyWiki 的用法,想看看其它網站的資料,在左側主選單裡,有我收集的 [[TiddlyWiki 相關連結|TiddlyWikiLink]]。如果你是第一次接觸 TiddlyWiki ,那麼,歡迎繼續參觀本站,希望內容讓你滿意。\n\n整個教學網站的內容,都是依據''一般使用者''的角度撰寫,所以對於進階的 TiddlyWiki 調校、新增巨集或外掛、甚至是如何寫外掛…等,這裡是找不到的。請移駕到 [[TiddlyWiki 相關連結|TiddlyWikiLink]] 找找看。建議可以加入[[TiddlyWiki 的中文 google group|http://groups.google.com/group/PrinceTiddlyWiki]]\n\n根據官方網站的說法,TiddlyWiki 最好是使用 FireFox 操作才能發揮最大的效果,但是在 IE 瀏覽器或其他瀏覽器如 Safari 、 Oprea 等也大都能正常工作。推薦使用 FireFox ,它是一個自由、免費、值得你下載使用的瀏覽器。\n\n接下來讓我們看看什麼是 TiddlyWiki 。
畫一條[[水平線]]做分隔線最簡單不過。只要在行開頭單行用四個減號(-)就行了。像這樣:\n{{{\n----\n}}}\n----
[[標籤]]除了可以用來做 Tiddler 的分類整理,有幾個[[特殊標籤]],還具有特殊的效果。\n\n*excludeSearch:加上這個標籤, Tiddler 就不會出現在搜尋的結果裡,可以用來隱藏不想讓人找到的 Tiddler 。\n*systemConfig:加上這個標籤的 Tiddler 內容為 javascript 程式碼,用途則為[[自訂巨集]]。\n*systemTiddler:具有這個標籤的 Tiddler 內容都具有特殊用途,像[[網站標題]]的 SiteTitle ,[[網站副標題]]的 SiteSubtitle ,左側[[主選單]]的 MainMenu ,[[首頁預設 Tiddler]]的 DefaultTiddlers 等。當使用''進階選項''裡的''儲存範本''建立全新的 TiddlyWiki 時,systemTiddler 標籤的 Tiddler 是唯一會複製到範本檔案的 Tiddler 。\n*excludeLists:加上這個標籤的 Tiddler 便不會出現在 SideBar 的列表裡了。
同樣地,網站副標題也是放在一個特殊的 Tiddler 裡面,你應該也猜到了: SiteSubtitle 。\n\n請依照修改網站主標題的方法,在 SiteSubtitle 裡修改網站副標題。別忘了要[[儲存變更]],並重新整理網頁,才能看到更新的結果。
網站的標題放在一個特殊的 Tiddler 裡面: SiteTitle 。\n\n現在你可以用滑鼠點選 SiteTitle ,然後在出現的 Tiddler 裡面修改你的網站標題,修改完成後,在右側的 SideBar 裡找到[[儲存變更]],將修改結果存檔,最後,重新整理一次網頁。瞧!網站標題改好了。
[[網站標題|SiteTitle]]\n[[網站副標題|SiteSubtitle]]\n[[預設載入條目|DefaultTiddlers]]\n[[修改主選單|MainMenu]]\n[[修改網址|SiteUrl]](製作RSS Feed時會用到)
縮排在網頁裡,通常用在回覆的引言。使用上也是很簡單,只要在每行的開頭加上大於符號(>)就可以了。使用多個大於符號還可以建立多層縮排的效果。不廢話,看例子:\n\n歡迎\n>歡迎來到 TiddlyWiki 使用教學中文版。這個網站主要內容為翻譯自 TiddlyWikiTutorial 網站,加上個人的一些心得,為 TiddlyWiki 的基本使用教學。\n>>如果你已經熟悉 TiddlyWiki 的用法,想看看其它網站的資料,在左側主選單裡,有我收集的 TiddlyWiki 相關連結。如果你是第一次接觸 TiddlyWiki ,那麼,歡迎繼續參觀本站,希望內容讓你滿意。\n>>>整個教學網站的內容,都是依據一般使用者的角度撰寫,所以對於進階的 TiddlyWiki 調校、新增巨集或外掛、甚至是如何寫外掛…等,這裡是找不到的。請移駕到 TiddlyWiki 相關連結 找找看。建議可以加入TiddlyWiki 的中文 google group\n>根據官方網站的說法,TiddlyWiki 最好是使用 FireFox 操作才能發揮最大的效果,但是在 IE 瀏覽器或其他瀏覽器如 Safari 、 Oprea 等也大都能正常工作。推薦使用 FireFox ,它是一個自由、免費、值得你下載使用的瀏覽器。\n\n為了不浪費版面,這個例子的寫法請自己用編輯 Tiddler 的方法觀看。\n\n如果要縮排的文字段落包括很多行,要在每行的開頭都加上大於符號是很麻煩的。沒關係,我們有個省力的寫法:用單行連續三個小寫符號(<<<)放在要縮排文章的上面和下面。格式如下:\n\n{{{\n<<<\n第一個文章段落…\n…\n第 n 個文章段落…\n<<<\n}}}
除了內建巨集之外, TiddlyWIki 可以讓我們建立[[自訂巨集]],擴充額外的功能。\n\n因為這個教學內容定位為''一般使用者'',也就是利用現成的 TiddlyWiki 功能,並專注在內容的建置而不是功能的改造。有關利用[[自訂巨集]]擴充功能的部份,請參考相關網站:\n\n<<tiddler "TiddlyWiki 相關連結">>
要建立[[表格]],只要在儲存格的兩側加上垂直線(|),就是鍵盤上,用 Shift + 反斜線(\s) 才能按出來的那個符號。要製作表格之前,建議先畫個草稿,再依草稿製作。下面是一個有合併儲存格的表格範例:\n\n|在第二個垂直線的後面加上小寫的英文字母 c ,則變成表格的標題|c\n|!標題儲存格:加一個驚嘆號(!)在第一個垂直線的後面,儲存格就變成標題儲存格。|!標題2|!標題3|\n| 開頭有空白代表靠右對齊| 兩邊有空白代表置中 |結尾有空白代表靠左 |\n|>|>|要橫向合併儲存格,則是在被合併的儲存格裡加上大於符號(>)|\n|要縱向合併儲存格,則是在被合併的儲存格裡加上蝌蚪符號(~)|>|另一個靠左對齊的例子 |\n|~|>| 另一個靠右對齊的例子|\n|>|>|bgcolor(green):儲存格的背景顏色可以用bgcolor(顏色代碼): 指定|\n\n上面的表格範例寫法如下:\n{{{\n|在第二個垂直線的後面加上小寫的英文字母 c ,則變成表格的標題|c\n|!標題儲存格:加一個驚嘆號(!)在第一個垂直線的後面,儲存格就變成標題儲存格。|!標題2|!標題3|\n| 開頭有空白代表靠右對齊| 兩邊有空白代表置中 |結尾有空白代表靠左 |\n|>|>|要橫向合併儲存格,則是在被合併的儲存格裡加上大於符號(>)|\n|要縱向合併儲存格,則是在被合併的儲存格裡加上蝌蚪符號(~)|>|另一個靠左對齊的例子 |\n|~|>| 另一個靠右對齊的例子|\n|>|>|bgcolor(green):儲存格的背景顏色可以用bgcolor(顏色代碼): 指定|\n}}}
有時, Tiddler 裡的內容寫到一半想先存起來,但不想被看到,這時就可以用''註解''的語法來@@隱藏@@內容。\n\n註解的語法如下:\n{{{\n/% 不想被看到的內容 %/\n}}}\n\n這篇 Tiddler 裡隱藏了一小段內容,請使用編輯功能查看。\n\n/%\n看不到,看不到,就是看不到!\n\n哇!被你看到了。那你應該學會註解語法了。\n%/
TiddlyWiki 的版面,主要分成四個部份:\n*標題區:包含主標題與副標題。\n*左側主選單:這裡可以讓我們設定導覽整個網站的超連結。\n*中央內容區:所有的 Tiddler 都會出現在這一區。\n*右側 SideBar 區:這裡包括許多不同的功能,這部份請看 SideBar 的詳細介紹。\n\n當我們把滑鼠移到一個 Tiddler 的範圍時,可以在 Tiddler 的左上方看到四個連結,這四個連結的功能如下:\n*關閉:把目前的 Tiddler 關掉。當看完一個 Tiddler 之後,可以直接關閉它,把版面空出來顯示其它 Tiddler 。\n*編輯:讓 Tiddler 進入編輯模式。\n*引用連結:在網址列顯示這個 Tiddler 的連結。當我們或別人想在 TiddlyWiki 之外直接連至網站裡的 Tiddler 時,就會用到它。\n*引用:列出所有連到這篇文章的 Tiddler 。
李順孝,內壢高中電腦科教師。\n\n電子郵件: lsslss@gmail.com
這個使用教學,是為了個人教學上的需要所製作的。準備在課堂上推廣給學生使用。\n\n因為發現,網路上的中文資源,[[BramChen|http://bram.cozysite.com/ptw/]] 的站似乎比較適合進階玩家,而[[MilchFlasche|http://linshi.twbbs.org/usr/m/milchflasche/TiddlyWiki.html]] 的站很吸引人,讓人很想趕快去體驗 TiddlyWiki 的威力,但是對 wiki 這個領域完全不熟悉的人會找不到施力點。\n\n後來到了官網介紹的 [[TiddlyWikiTutorial|http://www.blogjones.com/TiddlyWikiTutorial.html]] ,詳讀之後,終於對 TiddlyWiki 有了比較深入而清楚的認識。可惜這是一個英文網站,所以花了三天的時間把這幾天的心得用 [[TiddlyWikiTutorial|http://www.blogjones.com/TiddlyWikiTutorial.html]] 的架構寫下來。做為上課用的教材。\n\n既然做好了,當然不能藏私。畢竟取之於網路,就要回饋回網路。\n\n[<img[姓名標示|images/by.gif]][<img[非商業性|images/nc.gif]][<img[相同方式分享|images/sa.gif]]本站裡的一切內容,由本人撰寫的,一律以 ''姓名標示-非商業性-相同方式分享 2.0 台灣 (~Attribution-NonCommercial-ShareAlike 2.0 Taiwan)'' 方式分享。非由本人撰寫的部份會列出原作及出處。如有疏漏,煩請告知,定當立即改進。連絡方式請看[[關於我]]。\n\nTiddlyWiki 版本:<<version>>\n\n本站新增 [img[RSS|images/rss.gif][TiddlyWikiTutorialTW.xml]] ,歡迎利用。
當我們開啟 TiddlyWiki 之後,除了左邊的主選單和右邊的 SideBar 之外,中間會出現我們所設定的 Tiddler 。以本站為例,預設開啟時會出[[歡迎]]和 TiddlyWiki 兩個 Tiddler。\n\n這個設定也是放在一個特殊的 Tiddler 裡面: DefaultTiddlers 。\n\n接下來,請修改 DefaultTiddlers ,裡面是 Tiddler 列表,每行一個 Tiddler 。當開啟 TiddlyWiki 時,在這裡所列出的 Tiddler 就會顯示在中央區域。\n\n關於 Tiddler 的詳細說明,請參考[[如何建立一個 Tiddler]]教學。