Есть ли способ полностью отключить загрузку изображений в Summernote, но сохранить ввод URL-адреса изображения? Самое близкое, что я нашел, это вариант disableDragAndDrop: true
, но он не удаляет кнопку загрузки из всплывающего окна изображения.
Отключить загрузку изображений в Summernote
Ответы (7)
Вероятно, есть лучший способ выполнить то, что вы собираетесь сделать... но очень простое решение, которое приходит на ум, - просто добавить это в ваши таблицы стилей:
.note-group-select-from-files {
display: none;
}
Он отлично работает, чтобы оставить только ввод URL-адреса изображения, и выполняет то, что вы собираетесь делать, если только кто-то не проверит элемент и не обнаружит, что элемент загрузки все еще существует без отображения:
Редактировать: я взглянул на исходный код Summernote, и похоже, что приведенное выше решение на самом деле является хорошим способом. В настоящее время нет API, чтобы отключить только кнопку загрузки файла, не говоря уже о том, чтобы сделать это, оставив ввод URL-адреса img нетронутым. Конечно, вы всегда можете добавить его и открыть запрос на извлечение.
var body = '<div class="form-group note-group-select-from-files">' +
'<label>' + lang.image.selectFromFiles + '</label>' +
'<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple" />' +
imageLimitation +
'</div>' +
'<div class="form-group" style="overflow:auto;">' +
'<label>' + lang.image.url + '</label>' +
'<input class="note-image-url form-control col-md-12" type="text" />' +
'</div>';
Вы можете переопределить панель инструментов и определить там свой собственный набор кнопок. Вот пример фрагмента кода:
$("#summernote").summernote({
height: 300,
toolbar: [
[ 'style', [ 'style' ] ],
[ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],
[ 'fontname', [ 'fontname' ] ],
[ 'fontsize', [ 'fontsize' ] ],
[ 'color', [ 'color' ] ],
[ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
[ 'table', [ 'table' ] ],
[ 'insert', [ 'link'] ],
[ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]
]
});
Этот код создает панель инструментов без опции вставки видео и изображения и со всеми другими доступными опциями. Вы можете ознакомиться с подробной документацией по API здесь.
Найдите этот код в файле summernote.js.
tplDialog = function (lang, options) {
var tplImageDialog = function () {
return '<div class="note-image-dialog modal" aria-hidden="false">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" aria-hidden="true" tabindex="-1">×</button>' +
'<h4>' + lang.image.insert + '</h4>' +
'</div>' +
'<div class="modal-body">' +
'<div class="row-fluid">' +
'<h5>' + lang.image.selectFromFiles + '</h5>' +
'<input class="note-image-input" type="file" name="files" accept="image/*" />' +
'<h5>' + lang.image.url + '</h5>' +
'<input class="note-image-url form-control span12" type="text" />' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button href="#" class="btn btn-primary note-image-btn disabled" disabled="disabled">' + lang.image.insert + '</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
};
Удалите этот код:
'<h5>' + lang.image.selectFromFiles + '</h5>' +
'<input class="note-image-input" type="file" name="files" accept="image/*" />' +
Теперь вход для загрузки файла удален из модального диалога.
Использование Jquery Это сработало для меня
$('div.note-group-select-from-files').remove();
Или, если (как предлагает dwild) вы хотите проверить, что элемент существует, прежде чем пытаться его удалить:
var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
imageUploadDiv.remove();
}
remove()
для этого пустого набора. Никаких исключений не будет
- person The Coprolal; 02.07.2019
Для летней версии .8*
Используйте следующее, чтобы удалить кнопку:
.note-insert {
display: none
}
Пользователи по-прежнему смогут перетаскивать изображения.
Прочитав немного кода, который я обнаружил, удалив этот код в summernote.js, я удалю эту ФУНКЦИЮ ЗАГРУЗКИ.
Просто удалите эту форму из своего файла, так как ни один из приведенных выше ответов мне не подойдет.
'<div class="form-group note-form-group note-group-select-from-files">' +
'<label class="note-form-label">' + lang.image.selectFromFiles + '</label>' +
'<input class="note-image-input form-control note-form-control note-input" '+
' type="file" name="files" accept="image/*" multiple="multiple" />' +
imageLimitation +
'</div>' +
У меня была такая же проблема, и она кажется сложной, но вы можете просто переобъявить панель инструментов:
`$('#summernote').summernote({
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
});`