Как использовать summernote для одновременной передачи контента и изображений через ajax

Question

Я пытаюсь создать текстовый редактор типа wp для загрузки изображения и контента для публикации. Поэтому я использовал Summernote в качестве текстового редактора.

Я пытаюсь добиться того, чтобы я отправлял содержание сообщения, т.е. текстовое содержимое и медиа, которые прикреплены к сообщению одновременно. Так что я могу обрабатывать это одновременно.

Ниже приведен мой HTML-код.

<textarea name="post_content" id="post_content" class="form-control round post_content"></textarea>

Я использую следующий код JQuery:

$('#post_content').summernote(
                {
                    height: 300,
                    placeholder: "Type Your Post Content...",
                    toolbar: [
                                ['style', ['style']],
                                ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                                ['fontname', ['fontname']],
                                ['fontsize', ['fontsize']],
                                ['color', ['color']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['height', ['height']],
                                ['table', ['table']],
                                ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
                                ['view', ['fullscreen', 'codeview']]
                                // ['help', ['help']]
                            ],
                    callbacks:
                        {
                            onImageUpload: function(files, editor, welEditable)
                                {
                                    for(var i = files.length - 1; i >= 0; i--)
                                        {
                                            sendFile(files[i], this);
                                        }
                                }
                        }
                });

            function sendFile(file, el)
                {
                    var form_data = new FormData();
                    form_data.append('file', file);
                    $.ajax({
                        data: form_data,
                        type: "POST",
                        url: '/image-upload.php',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(url) {
                            $(el).summernote('editor.insertImage', url);
                        }
                    });
                }

Проблема с текущим кодом заключается в том, что он загружает изображение непосредственно на сервер. Я хочу отправить изображение и контент одновременно одним нажатием кнопки, чтобы я мог сохранять текстовый код в БД и получать изображения, обрабатывать их в различных размерах и сохранять в БД.

Но я не могу понять, как мне этого добиться.

Answer 1

В составе @cloudformatter есть опция для вставки LocalImages. В сущности, он использует jQuery для получения некоторого контента, поиска всех изображений, размещения их на холсте, очистки их как данных, закодированных в base64, а затем замены URL-адреса изображения данными, закодированными в base64. Это было написано только для встраивания изображений, которые являются локальными в этом проекте (имеется в виду, что вы работаете в localhost), потому что он будет отправлять данные, удаленные для форматирования, и, конечно, удаленный модуль форматирования не имеет представления, где " http://localhost/myimage.jpg "есть.

Вы можете найти его в коде http://www.cloudformatter.com/CSS2PDF, соответствующая часть которого размещена здесь для вас. Вы можете применить аналогичный метод для замены всех изображений на эквиваленты base64, так как данные будут встроенными.

Конечно, вы храните в долгосрочной перспективе, что означает, что изображения не будут обновляться, если они изменились в каком-то http: // местоположении. Вы можете добавить что-то вроде атрибута data-url для хранения исходного URL-адреса и, если вы вернете данные для обновления, и использовать этот URL-адрес для замены данных, закодированных в base64.

embedLocalImages: function(dest) {
    jQuery(dest).find('img').each(function(index) {
        var img = this;
        var imageUrl = img.src;
        if (imageUrl.indexOf(xepOnline.Formatter.getBase()) != -1){
             var canvas = document.createElement('canvas');
             var ctx = canvas.getContext('2d');
             canvas.height = img.height;
             canvas.width = img.width;
             ctx.drawImage(img,0,0, img.width, img.height);
             var dataURL = canvas.toDataURL();
             jQuery(img).attr('src', dataURL);
            canvas = null;
        }
    });
},