Как использовать summernote для одновременной передачи контента и изображений через ajax
Я пытаюсь создать текстовый редактор типа 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 ответ
В составе @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;
}
});
},