angularjs - Angular-Summernote on-image-upload editor Object Undefined -
i'm struggling on figuring out how use angular-summernote callback on-image-upload.
the code in view:
<summernote data-editable="editable" data-on-image-upload="imageupload(files, editor)"></summernote>
and imageuplaod function:
$scope.imageupload = function(files, editor) { console.log(files); // filelist console.log(editor); // undefined console.log($scope.editable); // undefined };
and image not inserted editor. have tried googling implementation example on imageupload, find null. can show me how it?
i struggled too. current documentation basic feature poor. anyway, how it:
$scope.imageupload = function(files) { uploadeditorimage(files); }; function uploadeditorimage(files) { if (files != null) { // begin uploading image. // here i'm using ngfileupload module (named 'upload') upload files, can use $.ajax if want // remember include dependency in controller! upload.upload({ url: 'api/resources/upload-file', file: files[0] }).success(function(data, status, headers, config) { // image has been uploaded server. // need insert image text editor. var editor = $.summernote.eventhandler.getmodule(), uploaded_file_name = data.file_name, // filename stored on server. file_location = '/uploads/'+uploaded_file_name; editor.insertimage($scope.editable, file_location, uplaoded_file_name); }); } };
the important part, image display in editor, bit here:
var editor = $.summernote.eventhandler.getmodule(), uploaded_file_name = data.file_name, file_location = '/path-where-you-upload-your-image/'+uploaded_file_name; editor.insertimage($scope.editable, file_location, uploaded_file_name);
$.summernote.eventhandler.getmodule()
retrieves api methods native summernote. in case, need use insertimage()
method in order insert uploaded image editor.
if has cleaner solutions please go ahead!
Comments
Post a Comment