Summernote - 提交后上传图片

Question

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

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

$('#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);

            }
        });
    });
});

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

Answer 1

所以，我实际上能够实现这个功能，但是，它完全在 Summernote 之外。

特尔；博士：

1. 在 Summernote 提交时，拦截提交的 html（Summernote 将编辑器内容作为 html 发送），然后将其保存到数据库中
2. 在截取的html中搜索base64图片
3. 如果找到 base64 编码的图像，将它们解码，将它们转换为图像文件，然后将它们保存到磁盘
4. 解析原始 html，将标签的 src 属性替换为新保存图片的 url
5. 像往常一样将最终的 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 编码的默认图像处理。