Я использую редактор summernote на своем сайте и внедрил его, используя метод Click2edit, упомянутый на их сайте.
Однако загрузка изображения, если она используется, вызывает всевозможные проблемы. Я понимаю, что это то, что называется base64. Я попытался заменить это более прямой загрузкой файла на сервер, используя код из другого ответа stackoverflow [здесь]. ( Загрузка изображения Summernote ) Однако, похоже, он ничего не делает, изображение по-прежнему вставлено в исходный метод. Если вы поможете мне разобраться, как правильно это реализовать.
с точки зрения ошибки, мой сайт имеет несколько вкладок, одна из этих вкладок включает редактор clickernate click2edit, когда я пытался и использовал загрузку изображения и сохранял его, изображение не отображается и объединяет вкладки как 1 страницу (вероятно, какой-то особый символ где-то вызывает проблему?). Во-вторых, столбец 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. Но я тоже это пробовал, и результат был таким же. Я также не понимаю, как отключить собственный метод загрузки 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) { } }); }
Я внес небольшие изменения в редактор,
Исходный summernote преобразует загруженные изображения в формат 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); }