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

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

0 голосов
/ 15 декабря 2018

Я пытаюсь создать текстовый редактор типа 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);
                        }
                    });
                }

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

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

1 Ответ

0 голосов
/ 24 декабря 2018

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

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

Конечно, вы храните в долгосрочной перспективе, что означает, что изображения не будут обновляться, если они изменились в каком-то местоположении 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;
        }
    });
},
...