Я использую редактор Summernote на своем сайте и реализовал его с помощью метода Click2edit, упомянутого на их сайте. Вот.
Однако загрузка изображения, если она используется как есть, вызывает все виды проблем. Насколько я понимаю, это использует нечто, называемое base64. Я попытался заменить это более прямой загрузкой файла на сервер, используя код из другого ответа stackoverflow [здесь]. (Загрузка изображения SummernoteОднако, похоже, он ничего не делает, изображение все равно вставляется оригинальным методом. Если бы вы могли помочь мне решить, как правильно реализовать это.
Что касается ошибки, на моем сайте есть несколько вкладок, одна из которых включает в себя редактор летних заметок click2edit, когда я попытался использовать загрузку и сохранение изображения, картинка не отображается и объединяет вкладки как одну страницу (вероятно, какой-то специальный символ где-то вызывает проблемы?). Во-вторых, столбец sql, представляющий собой текстовый тип данных, не отображает содержимое при просмотре в студии управления sql, а содержимое редактируемое, что-то вроде ошибки сохранения. Мне пришлось удалить запись все вместе, чтобы вернуть вещи в нормальное русло.
мой код:
реализовать Summernote:
<div class="click2edit">click2edit</div>
var edit = function() {
$('.click2edit').summernote({focus: true});
};
var save = function() {
var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
$('.click2edit').destroy();
};
для загрузки файла я использую:
$(document).ready(function() {
$('#summernote').summernote({
height: 200,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
});
function sendFile(file, editor, welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "form_summernote_doc_upload_post.php",
cache: false,
contentType: false,
processData: false,
success: function(url) {
editor.insertImage(welEditable, url);
}
});
}
});
Я должен также упомянуть, что вывод загружается в SQL с помощью Post, который включает в себя
(stuff)....sql_safe($Postarray[text])....(stuff)
Я подумал, что это может быть связано с тем, что я использую метод click2edit для инициирования summernote, а не для предоставления ему прямого #summernote id. Но я тоже это попробовал и результат был тот же. Я также не понимаю, как отключить SummerNotes собственный метод загрузки, может быть, это переопределение. Спасибо
Летняя заметка новой версии передает только один аргумент.
Таким образом, вы можете использовать этот скрипт
$('.summer').summernote({
height: "200px",
callbacks: {
onImageUpload: function(files) {
url = $(this).data('upload'); //path is defined as data attribute for textarea
sendFile(files[0], url, $(this));
}
}
});
function sendFile(file, url, editor) {
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
success: function(objFile) {
editor.summernote('insertImage', objFile.folder+objFile.file);
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
}
Я сделал небольшие изменения в редакторе,
Оригинальная летняя заметка преобразует загруженные изображения в формат base64.
Этот редактор загружает изображения через Php в файловую систему,
Просто убедитесь, что у вас есть права на запись в папку img-uploads.
Я понял глупую ошибку, которую я совершил,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
необходимо включить в функцию инициализации summernote следующим образом:
var editit = function() {
$("#defaulttab").addClass("active");
$('.click2edit').summernote({
focus: true,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}