Отключить загрузку изображений в Summernote

Есть ли способ полностью отключить загрузку изображений в Summernote, но сохранить ввод URL-адреса изображения? Самое близкое, что я нашел, это вариант disableDragAndDrop: true, но он не удаляет кнопку загрузки из всплывающего окна изображения.


person Jonan    schedule 09.11.2015    source источник


Ответы (7)


Вероятно, есть лучший способ выполнить то, что вы собираетесь сделать... но очень простое решение, которое приходит на ум, - просто добавить это в ваши таблицы стилей:

.note-group-select-from-files {
  display: none;
}

Он отлично работает, чтобы оставить только ввод URL-адреса изображения, и выполняет то, что вы собираетесь делать, если только кто-то не проверит элемент и не обнаружит, что элемент загрузки все еще существует без отображения:

введите здесь описание изображения


Редактировать: я взглянул на исходный код Summernote, и похоже, что приведенное выше решение на самом деле является хорошим способом. В настоящее время нет API, чтобы отключить только кнопку загрузки файла, не говоря уже о том, чтобы сделать это, оставив ввод URL-адреса img нетронутым. Конечно, вы всегда можете добавить его и открыть запрос на извлечение.

https://github.com/summernote/summernote/blob/4b1bf144862a88899a464ddfab6bc0593a061fbc/src/js/bs3/module/ImageDialog.js#L24

  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>';
person wesww    schedule 11.11.2015

Вы можете переопределить панель инструментов и определить там свой собственный набор кнопок. Вот пример фрагмента кода:

$("#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 здесь.

person Aqib Ashef    schedule 28.11.2016
comment
он / она просто хочет отключить загрузку с компьютера, а не с URL-адреса, поэтому, если мы используем ваше решение, оно полностью удалит функцию изображения. - person hakiko; 26.02.2017

Найдите этот код в файле 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">&times;</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/*" />' +

Теперь вход для загрузки файла удален из модального диалога.

person Sulung Nugroho    schedule 16.08.2016

Использование Jquery Это сработало для меня

 $('div.note-group-select-from-files').remove();

Или, если (как предлагает dwild) вы хотите проверить, что элемент существует, прежде чем пытаться его удалить:

var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
  imageUploadDiv.remove();
}
person 4Jean    schedule 09.03.2018
comment
CSS был бы лучшим подходом, поскольку мы не знаем, когда тег будет присутствовать в DOM. Может и нечего удалять() - person dwilda; 15.03.2018
comment
Это настоящая двилда. Я просто подумал, что кто-то никогда не сможет сказать, может проверить элемент и изменить скрытое на видимое. - person 4Jean; 16.03.2018
comment
Примечание: второй фрагмент кода не нужен. Если селектор jquery выдает пустой набор результатов, вы все равно можете вызвать remove() для этого пустого набора. Никаких исключений не будет - person The Coprolal; 02.07.2019
comment
Мне нравится этот подход, так как скрытие простого слоя с помощью css оставляет входной файл в моем массиве сообщений. Если это не то поле, которое мне нужно в моей форме, я бы предпочел удалить его, а не просто скрыть;) - person Mavelo; 06.09.2019

Для летней версии .8*

Используйте следующее, чтобы удалить кнопку:

.note-insert {
    display: none
}

Пользователи по-прежнему смогут перетаскивать изображения.

person Christopher Furman    schedule 15.10.2019

Прочитав немного кода, который я обнаружил, удалив этот код в 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>' +
person Dhruv Saxena    schedule 02.11.2017
comment
Обычно не рекомендуется редактировать чужие библиотеки, если только вы не хотите заниматься обслуживанием после каждого обновления. - person Richard; 19.01.2019

У меня была такая же проблема, и она кажется сложной, но вы можете просто переобъявить панель инструментов:

    `$('#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']]
  ]
});`
person Franz Andreani    schedule 04.12.2018
comment
Вопрос заключался в том, как сохранить возможность добавления изображения по URL, но убрать возможность загрузки изображения. Это удаляет оба, поэтому не отвечает на вопрос. - person Richard; 19.01.2019