Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-23 15:19:42 +02:00
Code Releases Activity

Image upload for WYSIWYG editor

Browse source 
Fixes #106
This commit is contained in:
Harvey Kandola 2018-06-06 16:53:31 +01:00
parent b828145163
commit b34e41f65c
4 changed files with 103 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
gui/app/components/section/wysiwyg/type-editor.js
View file

@ -42,6 +42,9 @@ export default Component.extend({
statusbar: false,
inline: true,
paste_data_images: true,
images_upload_handler: function (blobInfo, success, failure) { // eslint-disable-line no-unused-vars
success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
},
image_advtab: true,
image_caption: true,
media_live_embeds: true,
@ -98,14 +101,14 @@ export default Component.extend({
'advlist autolink lists link image charmap print hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code codesample fullscreen',
'insertdatetime media nonbreaking save table directionality',
'template paste textcolor colorpicker textpattern imagetools'
'template paste textcolor colorpicker textpattern imagetools uploadimage'
],
menu: {},
menubar: false,
toolbar1:
'formatselect fontsizeselect | bold italic underline strikethrough superscript subscript | forecolor backcolor link unlink',
toolbar2:
'outdent indent bullist numlist | alignleft aligncenter alignright alignjustify | table image media codesample',
'outdent indent bullist numlist | alignleft aligncenter alignright alignjustify | table uploadimage image media codesample',
save_onsavecallback: function () {
Mousetrap.trigger('ctrl+s');
}

BIN
gui/public/tinymce/plugins/uploadimage/img/icon.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 319 B

97
gui/public/tinymce/plugins/uploadimage/plugin.js Executable file
View file

@ -0,0 +1,97 @@
(function() {
tinymce.create('tinymce.plugins.UploadImagePlugin', {
init: function(ed, url) {
// Register commands
ed.addCommand('mceUploadImage', function() {
var displayImage = function( base64 ) {
if ( ! base64 ) {
return false;
}
var tpl = '<img src="%s" />';
ed.insertContent(tpl.replace('%s', base64));
ed.focus();
ed.windowManager.close();
};
/**
* Load Image file (from input)
* and get the base64 encoded image data.
*
* @link http://stackoverflow.com/questions/6978156/get-base64-encode-file-data-from-input-form
*
* @param {String} input Input ID.
* @param {Function} callback Callback function to call when file has loaded to send it the base64.
*
* @return {Function} The callback function result.
*/
var getBase64FromInput = function( input, callback ) {
var filesSelected = document.getElementById( input ).files;
if ( filesSelected.length > 0 )
{
var fileToLoad = filesSelected[0],
fileReader = new FileReader();
fileReader.readAsDataURL(fileToLoad);
fileReader.onload = function(fileLoadedEvent) {
return callback( fileLoadedEvent.target.result );
};
}
else
{
return callback( false );
}
};
ed.windowManager.open({
title:'Upload Image',
body:[{
type:"container",
html: '<form action="" method="POST" enctype="multipart/form-data">' +
'<div class="mce-container" hidefocus="1" tabindex="-1">' +
'<div class="mce-container-body">' +
'<label>Select a file<br />' +
'<input type="file" name="file" id="upload-image" accept="image/*" class="mce-textbox mce-placeholder" hidefocus="true">' +
'</label></div>' +
'</div>' +
'</form>'
}],
onSubmit: function(){
getBase64FromInput( 'upload-image', displayImage );
return false;
}
});
});
// Register buttons
ed.addButton('uploadimage', {
title : 'Upload Image',
cmd : 'mceUploadImage',
image : url + '/img/icon.png'
});
},
getInfo: function() {
return {
longname : 'Upload Image',
author : 'François Jacquet',
authorurl : 'https://github.com/francoisjacquet/tinymce-uploadimage',
infourl : 'https://github.com/francoisjacquet/tinymce-uploadimage/blob/master/README.md',
version : '0.1'
};
}
});
tinymce.PluginManager.add('uploadimage', tinymce.plugins.UploadImagePlugin);
})();

1
gui/public/tinymce/plugins/uploadimage/plugin.min.js vendored Executable file
View file

@ -0,0 +1 @@
(function(){tinymce.create('tinymce.plugins.UploadImagePlugin',{init:function(ed,url){ed.addCommand('mceUploadImage',function(){var displayImage=function(base64){if(!base64){return false}var tpl='<img src="%s" />';ed.insertContent(tpl.replace('%s',base64));ed.focus();ed.windowManager.close()};var getBase64FromInput=function(input,callback){var filesSelected=document.getElementById(input).files;if(filesSelected.length>0){var fileToLoad=filesSelected[0],fileReader=new FileReader();fileReader.readAsDataURL(fileToLoad);fileReader.onload=function(fileLoadedEvent){return callback(fileLoadedEvent.target.result)}}else{return callback(false)}};ed.windowManager.open({title:'Upload Image',body:[{type:"container",html:'<form action="" method="POST" enctype="multipart/form-data"><div class="mce-container" hidefocus="1" tabindex="-1"><div class="mce-container-body"><label>Select a file<br /><input type="file" name="file" id="upload-image" accept="image/*" class="mce-textbox mce-placeholder" hidefocus="true"></label></div></div></form>'}],onSubmit:function(){getBase64FromInput('upload-image',displayImage);return false}})});ed.addButton('uploadimage',{title:'Upload Image',cmd:'mceUploadImage',image:url+'/img/icon.png'})},getInfo:function(){return{longname:'Upload Image',author:'François Jacquet',authorurl:'https://github.com/francoisjacquet/tinymce-uploadimage',infourl:'https://github.com/francoisjacquet/tinymce-uploadimage/blob/master/README.md',version:'0.1'}}});tinymce.PluginManager.add('uploadimage',tinymce.plugins.UploadImagePlugin)})();