summernote图片上传和替代方法不起作用 [英] summernote image upload and alternative not working

问题描述

我正在我的网站上使用summernote编辑器，并已使用其网站上提到的Click2edit方法实现了它.

I am using summernote editor on my site and have implemented it using the Click2edit method mentioned on their site here.

但是，如果按原样使用图像上传，则会引起各种问题.我的理解是，这使用的是所谓的base64.我尝试使用另一个stackoverflow答案[here]中的代码将其替换为更直接的文件上传到服务器. ( Summernote图片上传)但是，它似乎没有任何作用，但图片仍会插入原始方法.如果可以帮助我确定如何正确实施此方法.

However the image upload if used as it is causes all sorts of problems. My understanding is this is using something called base64. I tried to replace this with a more straight forward file upload to the server using code from another stackoverflow answer [here]. (Summernote image upload) However it doesn't seem to be doing anything, the image still gets inserted the original method. If you could help me work out how to correctly implement this.

关于错误，我的网站上有多个选项卡，其中一个选项卡包含click2edit summernote编辑器，当我尝试并使用图像上传并保存它时，图片不显示，并且将这些选项卡合并为1页面(某处的某些特殊字符可能会导致问题?).其次，作为文本数据类型的sql列在sql management studio中查看时不显示任何内容，并且该内容是可编辑的，从而产生某种保存错误.我最终需要一起删除所有条目，以使一切恢复正常.

in terms of the error, my site has several tabs, one of those tabs includes the click2edit summernote editor, when I tried and use the image upload and save it, the picture doesn't display and it combines the tabs as 1 page (likely some special character somewhere causes a problem?). Secondly the sql column which is a text datatype shows no content when viewed in sql management studio and the content is editable, gives some kind of saving error. I ended up needing to delete the entry all together to return things to normal.

我的代码:

实施summernote:

to implement 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();
};

我正在使用的文件上传:

for the file upload I am using:

$(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的

I should also mention the output is being uploaded to sql usinga Post which includes

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

我认为这可能与我使用click2edit方法来启动summernote而不是直接给它提供#summernote id有关.但是我也尝试过，结果是一样的.我也不明白如何禁用Summernotes自己的上传方法，也许这是最重要的.谢谢

I thought it might be to do with the fact I am using click2edit method of initiating summernote rather then giving it a straight forward #summernote id. But I tried that also and the result was the same. I also do not understand how to disable summernotes own method of uploading, maybe that is overriding. thanks

推荐答案

夏季注意，新版本仅传递一个参数. 所以你可以使用这个脚本

Summer note new version passes only one argument. So you can use this script

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

这篇关于summernote图片上传和替代方法不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！