Angular-Summernote on-image-upload编辑器对象未定义。

Question

我在努力弄清楚如何使用angular-summernote的callback on-image-upload。

我的视图中的代码:

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

还有imageUpload函数：

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

图片没有被插入到编辑器中。 我试图在Google上搜索有关imageUpload实现示例的信息，但始终找不到合适的。有人能告诉我该如何做吗？

- Kiddo

Answer 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 方法。在这种情况下，需要使用 insertImage() 方法将上传的图像插入回编辑器中。

如果有更简单的解决方案，请提出！

- Ed B

Answer 2

在上传图片时，不要使用“editor”对象，而是使用以下方法：

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

- M-Sha

---

但我不认为这是Angular的方式。@M-Sha - Kiddo

Answer 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);
                }
            });
        }
    }
};

- Marcelo J Forclaz