Question

我正在努力弄清楚如何使用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
};

图像未插入编辑器。我已经尝试使用googling来获取imageUpload上的实现示例，但是找到了null。谁能告诉我怎么做？

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

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

Answer 2

我通过这种方式通过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);
                }
            });
        }
    }
};

Answer 3

而不是使用＆＃39;编辑器＆＃39;对象在上传图像时使用以下内容

$（＆＃39; .summernote＆＃39;）。summernote（＆＃39; editor.insertImage＆＃39;，url）;

Angular-Summernote on-image-upload editor Object Undefined

3 个答案: