Question

我在我的网站上使用summernote编辑器，并使用他们网站here中提到的Click2edit方法实现了它。

然而，如果按原样使用图像上传会导致各种问题。我的理解是这是使用一种叫做base64的东西。我尝试使用来自另一个stackoverflow答案[here]的代码将更直接的文件上传到服务器。（Summernote image upload）然而，它似乎没有做任何事情，图像仍然插入原始方法。如果你能帮我解决如何正确实现这个问题。

就错误而言，我的网站有几个标签，其中一个标签包含click2edit summernote编辑器，当我尝试使用图片上传并保存时，图片无法显示，它结合了标签作为1页（可能某个特殊字符在某处导致问题？）。其次，作为文本数据类型的sql列在sql management studio中查看时没有显示内容且内容可编辑，给出了某种保存错误。我最终需要一起删除所有条目才能恢复正常。

我的代码：

实施夏令营：

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

我还应该提一下使用包含

的帖子将输出上传到sql

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

我认为这可能与我使用click2edit启动summernote的方法有关，而不是给它一个直接的#summernote id。但我也尝试了，结果是一样的。我也不明白如何禁用summernotes自己的上传方法，也许这就是重写。感谢

Answer 1

Summer note新版本只传递一个参数。所以你可以使用这个脚本

$('.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) {
        }
    });
}

Answer 2

我在编辑器上做了一些小改动，

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

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

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

summernote图片上传和替代不工作

3 个答案: