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

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

Ответ 1

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

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

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

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


Изменить: Я взглянул на исходный код Summernote, и похоже, что вышеупомянутое решение на самом деле является хорошим способом. В настоящее время нет api для отключения только кнопки загрузки файлов, не говоря уже об этом, оставляя img url input неповрежденным. Вы всегда можете добавить его и открыть запрос на растяжение, конечно.

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>';

Ответ 2

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

$("#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 подробно здесь.

Ответ 3

Найти этот код в 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/*" />' +

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

Ответ 4

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

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

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

var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
  imageUploadDiv.remove();
}

Ответ 5

Прочитав немного кода, который я нашел, удалив этот код в 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>' +

Ответ 6

Для версии Summernote .8*

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

.note-insert {
    display: none
}

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

Ответ 7

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

    '$('#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']]
  ]
});'