Skip to content

Commit 2e09a93

Browse files
committed
new code from rcode5
1 parent 1f4d5b7 commit 2e09a93

File tree

5 files changed

+150
-142
lines changed

5 files changed

+150
-142
lines changed

README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ wysihtml5-image-upload
44
Bootstrap Wysihtml5 with Custom Image Insert and Upload
55
====
66

7+
Update: Mr Roger (rcode5) has merge the upload code with his code. Use [rcode5's code](https://github.com/rcode5/image-wysiwyg-sample) for the latest version.
8+
If you're trying to customize your own, is [static/custom_image_wysihtml5](https://github.com/rcode5/image-wysiwyg-sample/tree/master/static). That's where the magic happens.
9+
Use the code below for handlers (example) in PHP. You can upload the files to a (local) webserver to get your own demo while
10+
rcode5's code builds a simple [Sinatra App](http://www.sinatrarb.com/) to demostrate the code.
11+
712
This sample code (powered by [W3Masters](http://www.w3masters.nl/) and [Twitter Bootstrap](http://twitter.github.com/bootstrap/) demonstrates how you can extend the nice image chooser dialog to the [Bootstrap-wysihtml5](https://github.com/jhollingworth/bootstrap-wysihtml5) wysiwyg editor by [rcode5](http://rcode5.wordpress.com/2012/11/01/custom-image-upload-modal-with-bootstrap-wysihtml5/comment-page-1/) with file upload.
813
File upload is provide by [jQuery.upload](http://lagoscript.org/jquery/upload).
914

index.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,11 @@ <h2>Download</h2>
8383
<h2>references/tools:</h2>
8484
<ul>
8585
<li>
86-
<a href='http://rcode5.wordpress.com/2012/11/01/custom-image-upload-modal-with-bootstrap-wysihtml5/'>blog writeup</a>
86+
<a href='http://rcode5.wordpress.com/2012/11/01/custom-image-upload-modal-with-bootstrap-wysihtml5/'>blog writeup</a>(rcode5)
8787
</li>
8888
<li>
8989
<a href="http://lagoscript.org/jquery/upload">jQuery.upload</a>
9090
</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>
9491
<li>
9592
<a href='http://jhollingworth.github.com/bootstrap-wysihtml5/'>bootstrap-wysihtml5</a>
9693
</li>

js/custom_image_and_upload_wysihtml5.js

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ wysiHelpers = {
55
/* this is what goes in the wysiwyg content after the image has been chosen */
66
var tmpl;
77
var imgEntry = "<img src='<%= url %>' alt='<%= caption %>'>";
8-
tmpl = _.template( imgEntry );
8+
tmpl = _.template("<div class='shrink_wrap'>" +
9+
imgEntry +
10+
"</div>" +
11+
"<p class='credit'><%= caption %></p>" +
12+
"<hr>");
913
return tmpl;
1014
}
1115
};
@@ -58,6 +62,8 @@ bootWysiOverrides = {
5862
var $row = $(ev.currentTarget);
5963
insertImage($row.data());
6064
insertImageModal.modal('hide');
65+
$('#uploadresult').html('');
66+
$('#file1').val('');
6167
});
6268

6369
insertImageModal.on('hide', function() {
@@ -69,22 +75,21 @@ bootWysiOverrides = {
6975

7076
if (!activeButton) {
7177
insertImageModal.modal('show');
72-
73-
$('#file1').change(function() {
74-
$(this).uploadimage('upload.php', function(res) {
75-
//$(res).insertAfter(this);
76-
if(res.status)
77-
{
78-
chooser.append(optionTemplate({"file":res.file,"caption":res.caption,"foreground":res.forground,"background":res.background}));
79-
$('#uploadresult').html('Upload successful').addClass('alert alert-success');
80-
}
81-
else
82-
{
83-
$('#uploadresult').html('Upload failed').addClass('alert alert-error');
84-
}
85-
}, 'json');
86-
});
8778

79+
$('#file1').change(function() {
80+
$(this).uploadimage('upload.php', function(res) {
81+
if(res.status)
82+
{
83+
chooser.append(optionTemplate({"file":res.file,"caption":res.caption}));
84+
$('#uploadresult').html('Upload successful').removeClass().addClass('alert alert-success');
85+
}
86+
else
87+
{
88+
$('#uploadresult').html('Upload failed').removeClass().addClass('alert alert-error');
89+
}
90+
}, 'json');
91+
});
92+
8893
insertImageModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) {
8994
e.stopPropagation();
9095
});
@@ -128,10 +133,10 @@ $(function() {
128133
"<div class='modal-body'>" +
129134
"<div class='chooser_wrapper'>" +
130135
"<table class='image_chooser images'></table>" +
131-
"<input name=\"file\" id=\"file1\" type=\"file\"><br>" +
136+
"<h4>Or Upload one to insert</h4>" +
137+
"<input name=\"file\" id=\"file1\" type=\"file\">" +
132138
"<div id=\"uploadresult\"></div>" +
133139
"</div>" +
134-
"" +
135140
"</div>" +
136141
"<div class='modal-footer'>" +
137142
"<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
@@ -143,7 +148,8 @@ $(function() {
143148
}
144149
};
145150

151+
$('.tip').tooltip();
146152
$('textarea.wysi').each(function() {
147-
$(this).wysihtml5($.extend(wysiwygOptions, {html:true, color:false, stylesheets:[]}));
153+
$(this).wysihtml5($.extend(wysiwygOptions, {html:true, color:false, stylesheets:[]}));
148154
});
149155
});

js/jqueryupload.js

Lines changed: 118 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -8,126 +8,126 @@
88
*/
99
(function($) {
1010

11-
var uuid = 0;
12-
13-
$.fn.uploadimage = function(url, data, callback, type) {
14-
var self = this, inputs, checkbox, checked,
15-
iframeName = 'jquery_upload' + ++uuid,
16-
iframe = $('<iframe name="' + iframeName + '" style="position:absolute;top:-9999px" />').appendTo('body'),
17-
form = '<form target="' + iframeName + '" method="post" enctype="multipart/form-data" />';
18-
19-
if ($.isFunction(data)) {
20-
type = callback;
21-
callback = data;
22-
data = {};
23-
}
24-
25-
checkbox = $('input:checkbox', this);
26-
checked = $('input:checked', this);
27-
form = self.wrapAll(form).parent('form').attr('action', url);
28-
29-
// Make sure radios and checkboxes keep original values
30-
// (IE resets checkd attributes when appending)
31-
checkbox.removeAttr('checked');
32-
checked.attr('checked', true);
33-
34-
inputs = createInputs(data);
35-
inputs = inputs ? $(inputs).appendTo(form) : null;
36-
37-
form.submit(function() {
38-
iframe.load(function() {
39-
var data = handleData(this, type),
40-
checked = $('input:checked', self);
41-
42-
form.after(self).remove();
43-
checkbox.removeAttr('checked');
44-
checked.attr('checked', true);
45-
if (inputs) {
46-
inputs.remove();
47-
}
48-
49-
setTimeout(function() {
50-
iframe.remove();
51-
if (type === 'script') {
52-
$.globalEval(data);
53-
}
54-
if (callback) {
55-
callback.call(self, data);
56-
}
57-
}, 0);
58-
});
59-
}).submit();
60-
61-
return this;
62-
};
63-
64-
function createInputs(data) {
65-
return $.map(param(data), function(param) {
66-
return '<input type="hidden" name="' + param.name + '" value="' + param.value + '"/>';
67-
}).join('');
11+
var uuid = 0;
12+
13+
$.fn.uploadimage = function(url, data, callback, type) {
14+
var self = this, inputs, checkbox, checked,
15+
iframeName = 'jquery_upload' + ++uuid,
16+
iframe = $('<iframe name="' + iframeName + '" style="position:absolute;top:-9999px" />').appendTo('body'),
17+
form = '<form target="' + iframeName + '" method="post" enctype="multipart/form-data" />';
18+
19+
if ($.isFunction(data)) {
20+
type = callback;
21+
callback = data;
22+
data = {};
23+
}
24+
25+
checkbox = $('input:checkbox', this);
26+
checked = $('input:checked', this);
27+
form = self.wrapAll(form).parent('form').attr('action', url);
28+
29+
// Make sure radios and checkboxes keep original values
30+
// (IE resets checkd attributes when appending)
31+
checkbox.removeAttr('checked');
32+
checked.attr('checked', true);
33+
34+
inputs = createInputs(data);
35+
inputs = inputs ? $(inputs).appendTo(form) : null;
36+
37+
form.submit(function() {
38+
iframe.load(function() {
39+
var data = handleData(this, type),
40+
checked = $('input:checked', self);
41+
42+
form.after(self).remove();
43+
checkbox.removeAttr('checked');
44+
checked.attr('checked', true);
45+
if (inputs) {
46+
inputs.remove();
6847
}
6948

70-
function param(data) {
71-
if ($.isArray(data)) {
72-
return data;
73-
}
74-
var params = [];
75-
76-
function add(name, value) {
77-
params.push({name:name, value:value});
78-
}
79-
80-
if (typeof data === 'object') {
81-
$.each(data, function(name) {
82-
if ($.isArray(this)) {
83-
$.each(this, function() {
84-
add(name, this);
85-
});
86-
} else {
87-
add(name, $.isFunction(this) ? this() : this);
88-
}
89-
});
90-
} else if (typeof data === 'string') {
91-
$.each(data.split('&'), function() {
92-
var param = $.map(this.split('='), function(v) {
93-
return decodeURIComponent(v.replace(/\+/g, ' '));
94-
});
95-
96-
add(param[0], param[1]);
97-
});
98-
}
99-
100-
return params;
101-
}
102-
103-
function handleData(iframe, type) {
104-
var data, contents = $(iframe).contents().get(0);
105-
106-
if ($.isXMLDoc(contents) || contents.XMLDocument) {
107-
return contents.XMLDocument || contents;
108-
}
109-
data = $(contents).find('body').html();
110-
111-
switch (type) {
112-
case 'xml':
113-
data = parseXml(data);
114-
break;
115-
case 'json':
116-
data = window.eval('(' + data + ')');
117-
break;
118-
}
119-
return data;
120-
}
121-
122-
function parseXml(text) {
123-
if (window.DOMParser) {
124-
return new DOMParser().parseFromString(text, 'application/xml');
125-
} else {
126-
var xml = new ActiveXObject('Microsoft.XMLDOM');
127-
xml.async = false;
128-
xml.loadXML(text);
129-
return xml;
130-
}
49+
setTimeout(function() {
50+
iframe.remove();
51+
if (type === 'script') {
52+
$.globalEval(data);
53+
}
54+
if (callback) {
55+
callback.call(self, data);
56+
}
57+
}, 0);
58+
});
59+
}).submit();
60+
61+
return this;
62+
};
63+
64+
function createInputs(data) {
65+
return $.map(param(data), function(param) {
66+
return '<input type="hidden" name="' + param.name + '" value="' + param.value + '"/>';
67+
}).join('');
68+
}
69+
70+
function param(data) {
71+
if ($.isArray(data)) {
72+
return data;
73+
}
74+
var params = [];
75+
76+
function add(name, value) {
77+
params.push({name:name, value:value});
78+
}
79+
80+
if (typeof data === 'object') {
81+
$.each(data, function(name) {
82+
if ($.isArray(this)) {
83+
$.each(this, function() {
84+
add(name, this);
85+
});
86+
} else {
87+
add(name, $.isFunction(this) ? this() : this);
13188
}
89+
});
90+
} else if (typeof data === 'string') {
91+
$.each(data.split('&'), function() {
92+
var param = $.map(this.split('='), function(v) {
93+
return decodeURIComponent(v.replace(/\+/g, ' '));
94+
});
95+
96+
add(param[0], param[1]);
97+
});
98+
}
99+
100+
return params;
101+
}
102+
103+
function handleData(iframe, type) {
104+
var data, contents = $(iframe).contents().get(0);
105+
106+
if ($.isXMLDoc(contents) || contents.XMLDocument) {
107+
return contents.XMLDocument || contents;
108+
}
109+
data = $(contents).find('body').html();
110+
111+
switch (type) {
112+
case 'xml':
113+
data = parseXml(data);
114+
break;
115+
case 'json':
116+
data = JSON.parse(data);
117+
break;
118+
}
119+
return data;
120+
}
121+
122+
function parseXml(text) {
123+
if (window.DOMParser) {
124+
return new DOMParser().parseFromString(text, 'application/xml');
125+
} else {
126+
var xml = new ActiveXObject('Microsoft.XMLDOM');
127+
xml.async = false;
128+
xml.loadXML(text);
129+
return xml;
130+
}
131+
}
132132

133133
})(jQuery);

upload.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55
if (rand(0,3)>0) {
66

7-
/* save your file here from _FILES['file']
7+
/* save your file here from _FILES['file1']
88
*
99
* b.e.
1010
* $filename = basename($_FILES['file1']['name']);

0 commit comments

Comments
 (0)