diff --git a/gui/app/components/section/wysiwyg/type-editor.js b/gui/app/components/section/wysiwyg/type-editor.js index 5c8ef916..e6e53df2 100644 --- a/gui/app/components/section/wysiwyg/type-editor.js +++ b/gui/app/components/section/wysiwyg/type-editor.js @@ -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'); } diff --git a/gui/public/tinymce/plugins/uploadimage/img/icon.png b/gui/public/tinymce/plugins/uploadimage/img/icon.png new file mode 100755 index 00000000..d015cc81 Binary files /dev/null and b/gui/public/tinymce/plugins/uploadimage/img/icon.png differ diff --git a/gui/public/tinymce/plugins/uploadimage/plugin.js b/gui/public/tinymce/plugins/uploadimage/plugin.js new file mode 100755 index 00000000..0dac9d96 --- /dev/null +++ b/gui/public/tinymce/plugins/uploadimage/plugin.js @@ -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 = ''; + + 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: '
' + + '
' + + '
' + + '
' + + '
' + + '
' + }], + 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); +})(); + diff --git a/gui/public/tinymce/plugins/uploadimage/plugin.min.js b/gui/public/tinymce/plugins/uploadimage/plugin.min.js new file mode 100755 index 00000000..70ed11b2 --- /dev/null +++ b/gui/public/tinymce/plugins/uploadimage/plugin.min.js @@ -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='';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:'
'}],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)})();