forked from 20after4/Giki
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (93 loc) · 4.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="css/giki-main.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/gworker.js"></script>
<script type="text/javascript" src="src/giki.js"></script>
<script type="text/javascript" src="javascript/main.js"></script>
<title>guyht/Giki @ GitHub</title>
</head>
<body>
<div id="giki-header">
<img src="http://i.imgur.com/lPvmK.png" />
</div>
<div id="giki-main">
<div id="giki-content">
<b>Welcome to GIKI</b>
<br><br>
<b>GIKI</b> is a simple, real time, asynchronous parsing framework that suppors a wide variety of parsers.
Currently, BBCode and wiki text are supported, and it is very easy to customize and create new parsers.
<br><br>The performance of the parsers is outstanding as they make use of webworkers via the <a href="https://github.com/guyht/GWorker">GWorker</a> library.
<br><br><span style="color: rgb(253, 208, 23);">This text is parsed in real time. If you would like to try it out for yourself, simply click on the
try me button on the right hand side of the page and make some edits. The edits will appear in real time. </span><br>
</div>
<div id="giki-sub-content">
<br><b>Installation</b>
<br><br>Simply add the following to your HEAD tag:<br><br>
<pre>
<code> <script src="giki.js" type="text/javascript"></script> </code>
</pre><br>
<br>If you would like the script to be compatible with older browsers that do not support web workers, then also download and add the
<a href="https://github.com/guyht/GWorker">gworker.js</a> script to yoru HEAD tag. This is recommended.<br><br>
<pre><code> <script src="gworker.js" type="text/javascript"></script></code></pre>
<br><br>NOTE: The gworker script must be included <i>before</i> the giki script<br><br>
<b>Usage</b><br><br>Add a text area to your page to receive input, and a div to receive the parsed data and make sure they have unique ids.
<br><br>
<pre><code>
<div id="giki_div"></div>
<textarea id="giki_ta"></textarea>
</code></pre>
<br><br>Then simply invoke the giki object<br><br>
<pre><code> new Giki({
'div' : 'giki_div',
'text_area' : 'giki_ta',
'parser' : 'bbcode.js'
});</code></pre>
<br><br>Et voila!<br><br><b>Adding new parsers</b><br><br>
Giki is designed with extensibility in mind. Writing new parsers is very simple. New parsers are written as web workers (they will also work in older browsers thanks to
<a href="https://github.com/guyht/GWorker">gworker</a>) and therefore only need to implement the onmessage function, and use the postMessage function to return the parsed data.
<br><br>
<pre><code> self.onmessage = function(event) {
var data = event.data;
// ......
// Do some parsing
// .......
self.postMessage(data);
};</code></pre><br>
<b>Try Me...</b>
<div id="giki-example">
<textarea id="giki-try-me-ta-2" cols="85" rows="10">
[b]Try me...[/b]
</textarea>
<div id="giki-try-me-div-2"></div>
</div>
</div>
</div>
<div id="giki-try-me">
<div id="giki-try-me-top"></div>
<div id="giki-try-me-body">
<div id="giki-try-me-body-textarea">
<textarea id="giki-try-me-ta" cols="44" rows="7">
[b]Welcome to GIKI[/b]
[b]GIKI[/b] is a simple, real time, asynchronous parsing framework that suppors a wide variety of parsers. Currently, BBCode and wiki text are supported, and it is very easy to customize and create new parsers.
The performance of the parsers is outstanding as they make use of webworkers via the [url=https://github.com/guyht/GWorker]GWorker[/url] library.
[color=#FDD017]This text is parsed in real time. If you would like to try it out for yourself, simply click on the try me button on the right hand side of the page and make some edits. The edits will appear in real time. [/color]
</textarea>
</div>
</div>
</div>
<a href="http://github.com/guyht/Giki"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
</body>
</html>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1506165-11']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>