Summernote

Question

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

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

$('#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 之外。

长话短说：

在Summernote提交时，截取提交的html（Summernote将编辑器内容发送为html），然后将其保存到数据库
在截取的html
如果找到base64编码的图片，对其进行解码，转换成图片文件，保存到磁盘
解析原始 html，用您新保存的图像 url 替换标签的 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 - 提交后上传图片

Summernote - upload image after submit

ajax

jquery

长话短说：

代码：