Skip to content

Commit 4bcf9f8

Browse files
bassjobsenbassjobsen
committed
Create index.html
1 parent 5354e41 commit 4bcf9f8

File tree

1 file changed

+142
-0
lines changed

1 file changed

+142
-0
lines changed

‎index.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Bootstrap Wysihtml5 with Custom Image Insert and Upload</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="">
8+
<meta name="author" content="">
9+
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
10+
<link href="//cdn.jsdelivr.net/bootstrap.wysihtml5/0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet">
11+
<style type="text/css">
12+
body {
13+
padding-top: 60px;
14+
padding-bottom: 40px;
15+
}
16+
textarea {
17+
height: 200px;
18+
width: 100%;
19+
}
20+
21+
</style>
22+
23+
24+
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
25+
<!--[if lt IE 9]>
26+
<script src="../assets/js/html5shiv.js"></script>
27+
<![endif]-->
28+
29+
<!-- Fav and touch icons -->
30+
<!--link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
31+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
32+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
33+
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
34+
<link rel="shortcut icon" href="../assets/ico/favicon.png"-->
35+
</head>
36+
37+
<body>
38+
39+
<div class="navbar navbar-inverse navbar-fixed-top">
40+
<div class="navbar-inner">
41+
<div class="container">
42+
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
43+
<span class="icon-bar"></span>
44+
<span class="icon-bar"></span>
45+
<span class="icon-bar"></span>
46+
</button>
47+
<span class="brand" style="color:white;font-size:2em;">Bootstrap Wysihtml5 with Custom Image Insert and Upload</a>
48+
</div>
49+
</div>
50+
</div>
51+
52+
<div class="container">
53+
54+
<!-- Main hero unit for a primary marketing message or call to action -->
55+
<div class='row'>
56+
<div class='span12'>
57+
<textarea class='wysi'></textarea>
58+
</div>
59+
</div>
60+
61+
<!-- Example row of columns -->
62+
<div class="row">
63+
<div class="span4">
64+
<h2>About</h2>
65+
<p><p>This is a sample page showing Bootstrap Wysihtml5 with a customized image dialog and file upload.
66+
The idea and code from the customized image dialog came from <a href="http://rcode5.wordpress.com/2012/11/01/custom-image-upload-modal-with-bootstrap-wysihtml5/comment-page-1/">Custom Image Upload Modal with Bootstrap-Wysihtml5</a>. I combined this code with the code of <a href="http://lagoscript.org/jquery/upload">jQuery.upload</a> to add
67+
the file upload option.</p>
68+
69+
<p>Try it click the image dialog button. Try to insert or upload an images now. Images are not saved in this demo.</p>
70+
71+
<p>To use this code you need two server side handlers:</p>
72+
<ol>
73+
<li>Gives a list of images in json (example imagelist.php)</li>
74+
<li>Handles file upload and save the file and returns result in json (example upload.php)</li>
75+
</ol></p>
76+
</div>
77+
<div class="span4">
78+
<h2>Download</h2>
79+
<p>Please download, comment and fork this code on GitHub</p>
80+
<p><a class="btn btn-success" href="#">Download code &raquo;</a></p>
81+
</div>
82+
<div class="span4">
83+
<h2>references/tools:</h2>
84+
<ul>
85+
<li>
86+
<a href='http://rcode5.wordpress.com/2012/11/01/custom-image-upload-modal-with-bootstrap-wysihtml5/'>blog writeup</a>
87+
</li>
88+
<li>
89+
<a href="http://lagoscript.org/jquery/upload">jQuery.upload</a>
90+
</li>
91+
<li>
92+
<a href='http://rcode5.wordpress.com/2012/11/01/custom-image-upload-modal-with-bootstrap-wysihtml5/'>blog writeup</a>
93+
</li>
94+
<li>
95+
<a href='http://jhollingworth.github.com/bootstrap-wysihtml5/'>bootstrap-wysihtml5</a>
96+
</li>
97+
<li>
98+
<a href='https://github.com/xing/wysihtml5'>wysihtml5</a>
99+
</li>
100+
<li>
101+
<a href='http://twitter.github.com/bootstrap/'>Twitter Bootstrap</a>
102+
</li>
103+
<li>
104+
<a href='http://jquery.com/'>jQuery</a>
105+
</li>
106+
<li>
107+
<a href='http://underscorejs.org/'>underscorejs</a>
108+
</li>
109+
<li>
110+
<a href='http://placeholder.it'>placeholder.it</a>
111+
</li>
112+
<li>
113+
<a href='http://www.opensourcecms.eu/'>OpensourceCMS.EU</a>
114+
</li>
115+
</ul>
116+
<p>This code is used by <a href="http://www.jamedowebsites.nl/">Jamedo Websites</a> and <a href="http://www.gizzing.nl/">Gizzing</a></p>
117+
</div>
118+
</div>
119+
120+
<hr>
121+
122+
<footer>
123+
<p>&copy; <a href="http://www.w3masters.nl/">w3Masters</a> 2013</p>
124+
</footer>
125+
126+
</div> <!-- /container -->
127+
128+
<!-- Le javascript
129+
================================================== -->
130+
<!-- Placed at the end of the document so the pages load faster -->
131+
<script type="text/javascript" src="//cdn.jsdelivr.net/wysihtml5/0.3.0/wysihtml5-0.3.0.min.js"></script>
132+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
133+
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
134+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
135+
136+
<!--script type="/js/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script-->
137+
<script type="text/javascript" src="js/bootstrap-wysihtml5-0.0.2.js"></script>
138+
<script type="text/javascript" src="js/custom_image_and_upload_wysihtml5.js"></script>
139+
<script type="text/javascript" src="js/jqueryupload.js"></script>
140+
</body>
141+
</html>
142+

0 commit comments

Comments
 (0)