Vô hiệu hóa tải lên hình ảnh trong Summernote

Question

Có cách nào để vô hiệu hóa hoàn toàn việc tải lên hình ảnh trong Summernote, nhưng vẫn giữ đầu vào url hình ảnh? Điều gần nhất tôi thấy là tùy chọn disableDragAndDrop: true, nhưng điều này không xóa nút tải lên khỏi cửa sổ bật lên hình ảnh

Answer 1

Có thể là cách tốt hơn để thực hiện những gì bạn đang thực hiện ... nhưng một giải pháp rất đơn giản mà nói đến cái tâm là chỉ cần thêm video này vào stylesheets của bạn:

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

Nó hoạt động một cách hoàn hảo để lại chỉ là hình ảnh url đầu vào, và hoàn thành những gì bạn đang đi để trừ khi ai đó kiểm tra nguyên tố và khám phá ra rằng việc tải lên phần tử vẫn tồn tại khi không có màn hình hiển thị:

---

Chỉnh sửa: Tôi đã xem mã nguồn Summernote và có vẻ như giải pháp trên thực sự là một cách tốt để thực hiện. Hiện tại không có api để vô hiệu hóa chỉ cần nút tải lên tập tin, hãy để một mình làm như vậy trong khi rời khỏi img url đầu vào còn nguyên vẹn. Bạn luôn có thể thêm nó và mở một yêu cầu kéo, tất nhiên.

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

Answer 2

Tìm mã này trong 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>'; 
     }; 

Xóa mã này:

'<h5>' + lang.image.selectFromFiles + '</h5>' + 
'<input class="note-image-input" type="file" name="files" accept="image/*" />' + 

Bây giờ tập tin đầu vào upload được loại bỏ từ hộp thoại modal.

Answer 3

Bạn có thể ghi đè lên thanh công cụ và xác định các nút của riêng bạn ở đó. Đây là một codesnippet mẫu:

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

Mã này tạo ra các thanh công cụ không video và chèn hình ảnh tùy chọn và với tất cả các tùy chọn khác có sẵn. Bạn có thể kiểm tra tài liệu API chi tiết here.

Answer 4

Sau khi đọc một chút mã tôi tìm thấy bằng cách loại bỏ mã này trong summernote.js sẽ loại bỏ UPLOAD ĐẶC

Chỉ cần loại bỏ hình thức này tập tin của bạn như bất kỳ câu trả lời ở trên sẽ không làm việc cho tôi

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

Answer 5

Sử dụng jquery này làm việc cho tôi

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