Summernote图片上传和备选项不起作用

Question

我在我的网站上使用summernote编辑器，并使用他们网站这里提到的Click2edit方法进行了实现。

然而，如果按照原来的方法使用图片上传功能，就会出现各种问题。据我所知，这是使用了一种叫做base64的东西。我尝试使用另一个stackoverflow答案中的代码（Summernote image upload）替换它，使用更直接的文件上传到服务器。但是似乎什么也没有发生，图片仍然以原始的方式插入。如果您能帮助我正确地实现这个功能，那就太好了。

至于错误，我的网站有几个选项卡，其中之一包括click2edit summernote编辑器，当我尝试使用图像上传并保存时，图片不显示，而且会将选项卡组合成一个页面（可能是某个特殊字符造成的问题？）。其次，sql列是文本数据类型，在sql管理工具中查看时不显示任何内容，而且内容是可编辑的，会产生某种保存错误。最终，我不得不删除整个条目才能恢复正常。

我的代码：

实现summernote：

<div class="click2edit">click2edit</div>

var edit = function() {
 $('.click2edit').summernote({focus: true});
};
var save = function() {
  var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML:     array).
  $('.click2edit').destroy();
};

我正在使用以下内容进行文件上传：

$(document).ready(function() {
    $('#summernote').summernote({
        height: 200,
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
    });

    function sendFile(file, editor, welEditable) {
        data = new FormData();
        data.append("file", file);
        $.ajax({
            data: data,
            type: "POST",
            url: "form_summernote_doc_upload_post.php",
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                editor.insertImage(welEditable, url);
            }
        });
    }
});

我需要提醒一下，输出结果正在使用Post上传到sql数据库，其中包括：

(stuff)....sql_safe($Postarray[text])....(stuff)

我认为可能与我使用click2edit方法来启动summernote有关，而不是直接给它一个#summernote id。但我也尝试过那种方法，结果一样。我也不明白如何禁用summernote自己的上传方法，也许那正是覆盖的原因。谢谢。

- Ray_Hack

Answer 1

夏日笔记的新版本只需要传递一个参数。因此，您可以使用以下脚本：

$('.summer').summernote({
    height: "200px",
    callbacks: {
        onImageUpload: function(files) {
            url = $(this).data('upload'); //path is defined as data attribute for  textarea
            sendFile(files[0], url, $(this));
        }
    }
});

function sendFile(file, url, editor) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: url,
        cache: false,
        contentType: false,
        processData: false,
        success: function(objFile) {
            editor.summernote('insertImage', objFile.folder+objFile.file);
        },
        error: function(jqXHR, textStatus, errorThrown) {
        }
    });
}

- George John

Answer 2

我已经对编辑器进行了小的更改。

原始的Summernote将上传的图像转换为base64格式。 该编辑器通过Php将图像上传到文件系统， 只需确保您对img-uploads文件夹具有写入访问权限即可。

https://github.com/pherdee/summernote-img-upload

- fsonmezay

---

在将您的项目复制到更多帖子之前，请务必阅读《如何提供个人开源库？》（https://meta.stackexchange.com/q/229085）。 - Martijn Pieters

一个例子会很好。 - DobotJr

Answer 3

我意识到了我犯的愚蠢错误，

onImageUpload: function(files, editor, welEditable) {
        sendFile(files[0], editor, welEditable);
    }

需要与summernote初始化函数一起包含，如下所示：

var editit = function() {
  $("#defaulttab").addClass("active");    
  $('.click2edit').summernote({
    focus: true,
    onImageUpload: function(files, editor, welEditable) {
        sendFile(files[0], editor, welEditable);
    }

- Ray_Hack