|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>markItUp! Universal markup editor</title> |
|
6 <link rel="stylesheet" type="text/css" href="images/style.css"> |
|
7 <!-- markItUp! skin --> |
|
8 <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css"> |
|
9 <!-- markItUp! toolbar skin --> |
|
10 <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css"> |
|
11 <!-- jQuery --> |
|
12 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> |
|
13 <!-- markItUp! --> |
|
14 <script type="text/javascript" src="markitup/jquery.markitup.js"></script> |
|
15 <!-- markItUp! toolbar settings --> |
|
16 <script type="text/javascript" src="markitup/sets/default/set.js"></script> |
|
17 </head> |
|
18 <body> |
|
19 <h1><a href="http://markitup.jaysalvat.com/">markItUp!</a></h1> |
|
20 <p><em><a href="http://www.jaysalvat.com">By Jay Salvat</a></em></p> |
|
21 <p>Downloads, examples and documentation at <a href="http://markitup.jaysalvat.com">http://markitup.jaysalvat.com</a>.</p> |
|
22 <p>Click <a href="#" class="add">this link to insert content</a> from anywhere in the page or <a href="#" class="toggle">this one to <span>remove markItUp!</span></a></p> |
|
23 <textarea id="markItUp" cols="80" rows="20"> |
|
24 <h1>Welcome on markItUp!</h1> |
|
25 |
|
26 <p><strong>markItUp!</strong> is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own markup system can be easily implemented.</p> |
|
27 </textarea> |
|
28 <p>Support the project : <a href="http://markitup.jaysalvat.com/">Donate</a> | <a href="http://markitup.jaysalvat.com/">Contact</a></p> |
|
29 |
|
30 <script type="text/javascript"> |
|
31 $(function() { |
|
32 // Add markItUp! to your textarea in one line |
|
33 // $('textarea').markItUp( { Settings }, { OptionalExtraSettings } ); |
|
34 $('#markItUp').markItUp(mySettings); |
|
35 |
|
36 |
|
37 |
|
38 // You can add content from anywhere in your page |
|
39 // $.markItUp( { Settings } ); |
|
40 $('.add').click(function() { |
|
41 $('#markItUp').markItUp('insert', |
|
42 { openWith:'<opening tag>', |
|
43 closeWith:'<\/closing tag>', |
|
44 placeHolder:"New content" |
|
45 } |
|
46 ); |
|
47 return false; |
|
48 }); |
|
49 |
|
50 // And you can add/remove markItUp! whenever you want |
|
51 // $(textarea).markItUpRemove(); |
|
52 $('.toggle').click(function() { |
|
53 if ($("#markItUp.markItUpEditor").length === 1) { |
|
54 $("#markItUp").markItUp('remove'); |
|
55 $("span", this).text("get markItUp! back"); |
|
56 } else { |
|
57 $('#markItUp').markItUp(mySettings); |
|
58 $("span", this).text("remove markItUp!"); |
|
59 } |
|
60 return false; |
|
61 }); |
|
62 }); |
|
63 </script> |
|
64 </body> |
|
65 </html> |