TL; DR：

Question

我需要帮助上传照片（以及编辑器中的其他插入数据），但仅在单击提交按钮时。我搜索过论坛，用Google搜索但没有运气:(

我正在使用的代码用于上传图像并将文本保存到数据库，但是当我将其添加到编辑器时，它会立即上传图像。这对我来说不是理想的行为，如果用户将图像添加到编辑器然后决定关闭标签/关闭浏览器或转到另一个地址，图像将存储在服务器上 - 所以我希望有人帮助我仅在按下提交按钮时上传图像（在此之前，它将仅作为预览）。这是我的代码：

$('#summernote').summernote({
   //placeholder: 'your Message',

   height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']],
            ['save-button', ['save']]
        ],
        callbacks : {
            onImageUpload: function(image) {
                uploadImage(image[0]);
            }
        }
});

function uploadImage(image) {
var slika = new FormData();
slika.append("image",image);
$.ajax ({
    data: slika,
    type: "POST",
    url: "url - upload image script",// this file uploads the picture and 
                     // returns a chain containing the path
    cache: false,
    contentType: false,
    processData: false,
    success: function(url) {
        var image = url;
        $('#summernote').summernote("insertImage", image);
        console.log(slika);
        },
        error: function(data) {
            console.log(slika);
            }
    });
}

$(".note-save-button").addClass("pull-right");

$(function(){
    $('#addit_dtls_form').submit(function(event){

        var input_content = $('#summernote').summernote('code');
        var is_empty = $("#is_empty").val();
        var location_id = $("#location_id").val();;
        //event.preventDefault();
        $.ajax({ 
            url: 'url - store text to database',
            type: 'post',
            data: { 
                'input_content' : input_content, 
                'is_empty' : is_empty,
                'location_id' : location_id,
            }, 

            success: function(response){ 
                $.smallBox({
                        title : "USPEŠNO!",
                        content : "Sadržaj je uspešno snimljen!",
                        color : "#7DC27D",
                        timeout: 4000,
                        icon : "fa fa-check"
                });
                //console.log(input_content);

            }
        });
    });
});

希望有人可以帮助我，或者有人可以指示我的一些示例代码。 Tnx提前！

Answer 1

因此，我实际上能够实现此功能，但是，它完全不在Summernote范围内。

TL; DR：

在“ Summernote提交”上，在将提交的html保存到数据库之前，先对其进行拦截（Summernote将编辑器内容以html格式发送）
在截获的html中搜索base64图像
如果找到base64编码的图像，请对其进行解码，将其转换为图像文件，然后将其保存到磁盘中
解析原始html，将标记的src属性替换为新保存的图像的网址
像平常一样将最终的html保存到数据库中

代码：

我正在用PHP执行此操作。我的应用程序是一个论坛软件，其中html页面发布到PHP页面，并且在该页面中我们保存提交的文本。因此，在此文件中，我们添加了以下内容：

....
// The text from Summernote here is saved in a variable called $submitted_text
....
// This if-statement could probably be better, but this is working well for me so far
if (strpos($submitted_text, '<img') !== false && strpos($submitted_text, ';base64') !== false) {

    $doc = new DOMDocument();
    $doc->loadHTML($submitted_text);

    $tags = $doc->getElementsByTagName('img');

    foreach ($tags as $tag) {
        // Get base64 encoded string
        $srcStr = $tag->getAttribute('src');
        $base64EncData = substr($srcStr, ($pos = strpos($srcStr, 'base64,')) !== false ? $pos + 7 : 0);
        $base64EncData = substr($base64EncData, 0, -1);

        // Get an image file
        $img = base64_decode($base64EncData);

        // Get file type
        $dataInfo = explode(";", $srcStr)[0];
        $fileExt = str_replace('data:image/', '', $dataInfo);

        // Create a new filename for the image
        $newImageName = str_replace(".", "", uniqid("forum_img_", true));
        $filename = $newImageName . '.' . $fileExt;
        $file = '/media/storage/public/uploaded_imgs/' . $filename;

        // Save the image to disk
        $success = file_put_contents($file, $img);
        $imgUrl = 'https://www.yourdomain.com/uploaded_imgs/' . $filename;

        // Update the forum thread text with an img tag for the new image
        $newImgTag = '<img src="' . $imgUrl . '" />';

        $tag->setAttribute('src', $imgUrl);
        $tag->setAttribute('data-original-filename', $tag->getAttribute('data-filename'));
        $tag->removeAttribute('data-filename');
        $submitted_text = $doc->saveHTML();
    }
}

// Here, $submitted_text is now the modified html/text you'll want to save to your database. Huzzah! Handle anything else needed before saving the text here.

请注意，这意味着我们不需要Summernote本身的任何回调-我们正在使用具有base64编码的默认图像处理。

Summernote - 提交后上传图片

1 个答案:

TL; DR：

代码：