Angular-Summernote on-image-upload editor Object Undefined答案

【问题标题】：Angular-Summernote on-image-upload editor Object UndefinedAngular-Summernote on-image-upload editor Object Undefined
【发布时间】：2015-07-26 22:05:12
【问题描述】：

我正在努力弄清楚如何在图像上传时使用 angular-summernote 回调。

我认为的代码：

<summernote data-editable="editable" data-on-image-upload="imageUpload(files, editor)"></summernote>

还有 imageUplaod 函数：

$scope.imageUpload = function(files, editor) {
    console.log(files);  // FileList
    console.log(editor);  // undefined
    console.log($scope.editable); // undefined
};

并且图像没有插入到编辑器中。我曾尝试用谷歌搜索 imageUpload 上的实现示例，但发现为空。谁能教我怎么做？

【问题讨论】：

标签： angularjs image-upload summernote

【解决方案1】：

我也为此苦苦挣扎。这个基本功能的当前文档真的很差。无论如何，这就是我的做法：

$scope.imageUpload = function(files) {
    uploadEditorImage(files);
};

function uploadEditorImage(files) {
    if (files != null) {

        // Begin uploading the image.
        // Here I'm using the ngFileUpload module (named 'Upload') to upload files, but you can use $.ajax if you want
        // Remember to include the dependency in your Controller!
        Upload.upload({
            url: 'api/resources/upload-file',
            file: files[0]
        }).success(function(data, status, headers, config) {

            // The image has been uploaded to your server.
            // Now we need to insert the image back into the text editor.
            var editor = $.summernote.eventHandler.getModule(),
                uploaded_file_name = data.file_name, // this is the filename as stored on your server.
                file_location = '/uploads/'+uploaded_file_name;

            editor.insertImage($scope.editable, file_location, uplaoded_file_name);

        });

    }

};

要让图像重新显示在编辑器中，重要的部分在这里：

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() 检索所有 Summernote 原生的 API methods。在这种情况下，您需要使用insertImage() 方法将上传的图片重新插入到编辑器中。

如果有人有任何更清洁的解决方案，请继续！

【讨论】：

【解决方案2】：

上传图片时不要使用“编辑器”对象，而是使用以下内容

$('.summernote').summernote('editor.insertImage', url);

【讨论】：

但我不认为这是角度方式。 @M-Sha

【解决方案3】：

我是这样通过AngularJS + JQuery得到的：

$scope.summernoteOptions = {
    height: 300,
    focus: true,
    lang: 'es-ES',
    callbacks: {
        onImageUpload: function(files) {
            var data = new FormData();
            data.append("file", files[0]);
            $.ajax({
                data: data,
                type: "POST",
                url: "/admin/api/insertar-imagen-summernote.php",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    $('.summernote').summernote('editor.insertImage', url);
                }
            });
        }
    }
};

【讨论】：