bootstrap-editor extends bootstrap-wysihtml5 with image upload feature by using jQuery-File-Upload.
<script src="lib/js/wysihtml5-0.3.0.js"></script>
<script src="lib/js/jquery-1.7.2.min.js"></script>
<script src="lib/js/prettify.js"></script>
<script src="lib/js/bootstrap.min.js"></script>
<script src="lib/js/bootstrap-wysihtml5.js"></script>
<script src="lib/js/jquery.ui.widget.js"></script>
<script src="lib/js/jquery.iframe-transport.js"></script>
<script src="lib/js/jquery.fileupload.js"></script>
<script src="src/bootstrap-editor.js"></script>$('.textarea').bootstrapEditor({
fileupload: {
url: 'http://localhost:8888/',
dataType: 'json',
done: function(e, data) {
var imgs = [];
$.each(data.result.files, function(index, file) {
imgs.push({
src: file.url,
alt: file.name
});
});
return imgs;
}
}
});Init the editor with the fileupload options. See jQuery-File-Upload's Wiki for more details.
The done callback should return an object or an array of objects with the following format:
{
src: '/path/to/the/image',
alt: 'some alt text' // optional
}All other options are same as bootstrap-wysihtml5.
There are some server side support avaliable on https://github.com/blueimp/jQuery-File-Upload/wiki/Setup.
For example, node users can simply type:
npm install blueimp-file-upload-node
./node_modules/blueimp-file-upload-node/server.jsMIT