Skip to content

Commit 9cf7be5

Browse files
trantorLiutrantorLiu
committed
Init commit.
0 parents  commit 9cf7be5

File tree

69 files changed

+23511
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+23511
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2013 Trantor Liu
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# bootstrap-editor
2+
3+
bootstrap-editor extends [bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5) with image upload feature by using [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload).
4+
5+
## Files to reference
6+
```html
7+
<script src="lib/js/wysihtml5-0.3.0.js"></script>
8+
<script src="lib/js/jquery-1.7.2.min.js"></script>
9+
<script src="lib/js/prettify.js"></script>
10+
<script src="lib/js/bootstrap.min.js"></script>
11+
<script src="lib/js/bootstrap-wysihtml5.js"></script>
12+
<script src="lib/js/jquery.ui.widget.js"></script>
13+
<script src="lib/js/jquery.iframe-transport.js"></script>
14+
<script src="lib/js/jquery.fileupload.js"></script>
15+
<script src="src/bootstrap-editor.js"></script>
16+
```
17+
18+
## Usage
19+
20+
21+
```javascript
22+
$('.textarea').bootstrapEditor({
23+
fileupload: {
24+
url: 'http://localhost:8888',
25+
dataType: 'json',
26+
done: function(e, data) {
27+
var imgs = [];
28+
$.each(data.result.files, function(index, file) {
29+
imgs.push({
30+
src: file.url,
31+
alt: file.name
32+
});
33+
});
34+
return imgs;
35+
}
36+
}
37+
});
38+
```
39+
40+
Init the editor with the `fileupload` options. See [jQuery-File-Upload's Wiki](https://github.com/blueimp/jQuery-File-Upload/wiki/Options) for more details.
41+
42+
The `done` callback should return an object or an array of objects with the following format:
43+
44+
```javascript
45+
{
46+
src: '/path/to/the/image',
47+
alt: 'some alt text' // optional
48+
}
49+
```
50+
51+
All other options are same as [bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5/).
52+
53+
## Server
54+
55+
There are some server side support avaliable on https://github.com/blueimp/jQuery-File-Upload/wiki/Setup.
56+
57+
For example, node users can simply type:
58+
59+
```sh
60+
npm install blueimp-file-upload-node
61+
./node_modules/blueimp-file-upload-node/server.js
62+
```
63+
64+
## License
65+
66+
MIT

‎index.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
5+
<meta charset="utf-8">
6+
7+
<title>bootstrap-editor</title>
8+
9+
10+
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"></link>
11+
<link rel="stylesheet" type="text/css" href="lib/css/prettify.css"></link>
12+
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap-wysihtml5.css"></link>
13+
14+
<style type="text/css" media="screen">
15+
.btn.jumbo {
16+
font-size: 20px;
17+
font-weight: normal;
18+
padding: 14px 24px;
19+
margin-right: 10px;
20+
-webkit-border-radius: 6px;
21+
-moz-border-radius: 6px;
22+
border-radius: 6px;
23+
}
24+
</style>
25+
26+
<script type="text/javascript">
27+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
28+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
29+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
30+
})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
31+
32+
ga('create', 'UA-41799231-1', 'github.com');
33+
ga('send', 'pageview');
34+
</script>
35+
</head>
36+
<body>
37+
<div class="container">
38+
<div class="hero-unit" style="margin-top:40px">
39+
<h1 style="font-size:58px">bootstrap-editor <small>Simple, beautiful wysiwyg editors</small></h1>
40+
<hr/>
41+
<textarea class="textarea" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea>
42+
</div>
43+
44+
<div class="row">
45+
<div class="span6">
46+
<h2>About</h2>
47+
<p>
48+
bootstrap-editor extends <a href="https://github.com/jhollingworth/bootstrap-wysihtml5">bootstrap-wysihtml5</a> with file upload feature.
49+
</p>
50+
51+
<p style="text-align:center; margin-top:20px">
52+
<a class="btn btn-large btn-primary jumbo" href="https://github.com/trantorLiu/bootstrap-editor">View project on Github</a>
53+
</p>
54+
</div>
55+
<div class="span6" >
56+
<h2>Usage</h2>
57+
58+
59+
<p>
60+
<pre class="prettyprint linenums">$('.textarea').bootstrapEditor({
61+
fileupload: {
62+
url: 'http://localhost:8888',
63+
dataType: 'json',
64+
done: function(e, data) {
65+
var imgs = [];
66+
$.each(data.result.files, function(index, file) {
67+
imgs.push({
68+
src: file.url,
69+
alt: file.name
70+
});
71+
});
72+
return imgs;
73+
}
74+
}
75+
});</pre>
76+
</p>
77+
78+
<h3>Dependencies</h3>
79+
<p>
80+
<ul>
81+
<li><a href="https://github.com/jhollingworth/bootstrap-wysihtml5">bootstrap-wysihtml5</a></li>
82+
<li><a href="https://github.com/blueimp/jQuery-File-Upload">jQuery-File-Upload</a></li>
83+
</ul>
84+
</p>
85+
</div>
86+
</div>
87+
</div>
88+
89+
90+
<script src="lib/js/wysihtml5-0.3.0.js"></script>
91+
<script src="lib/js/jquery-1.7.2.min.js"></script>
92+
<script src="lib/js/prettify.js"></script>
93+
<script src="lib/js/bootstrap.min.js"></script>
94+
<script src="lib/js/bootstrap-wysihtml5.js"></script>
95+
<script src="lib/js/jquery.ui.widget.js"></script>
96+
<script src="lib/js/jquery.iframe-transport.js"></script>
97+
<script src="lib/js/jquery.fileupload.js"></script>
98+
<script src="src/bootstrap-editor.js"></script>
99+
100+
<script>
101+
$('.textarea').bootstrapEditor({
102+
fileupload: {
103+
url: 'http://localhost:8888',
104+
dataType: 'json',
105+
done: function(e, data) {
106+
var imgs = [];
107+
$.each(data.result.files, function(index, file) {
108+
imgs.push({
109+
src: file.url,
110+
alt: file.name
111+
});
112+
});
113+
return imgs;
114+
}
115+
}
116+
});
117+
</script>
118+
119+
<script type="text/javascript" charset="utf-8">
120+
$(prettyPrint);
121+
</script>
122+
123+
</body>
124+
</html>

0 commit comments

Comments
 (0)