在 Summernote 中禁用图像上传

Question

有没有什么办法可以完全禁用 Summernote 中的图片上传，但保留图片 url 输入？我发现最接近的是disableDragAndDrop: true 选项，但这不会从图像弹出窗口中删除上传按钮

Answer 1

可能有更好的方法来完成您的目标......但是想到的一个非常简单的解决方案是将其添加到您的样式表中：

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

只留下图像 url 输入非常有效，并完成了你的目标，除非有人要检查元素并发现上传元素仍然存在但不显示：

---

编辑： 我看了一下 Summernote 源代码，看起来上面的解决方案实际上是一个不错的方法。目前没有 api 可以仅禁用文件上传按钮，更不用说在保持 img url 输入不变的情况下这样做了。当然，您可以随时添加它并打开拉取请求。

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

在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/*" />' +

现在文件上传输入已从模式对话框中删除。

Answer 3

您可以覆盖工具栏并在那里定义自己的一组按钮。这是一个示例代码n-p：

$("#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 文档here。

Answer 4

在阅读了一些代码后，我发现通过在 summernote.js 中删除此代码将删除该 UPLOAD FEATURE

只需删除此表格即可，因为上述任何答案都不适合我

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

使用 Jquery 这对我有用

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

或者如果（如 dwilda 建议的那样）您想在尝试删除元素之前检查该元素是否存在：

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

Answer 6

我遇到了同样的问题，看起来很复杂，但您可以简单地重新声明工具栏：

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

Answer 7

对于summernote版本.8*

使用以下方法删除按钮：

.note-insert {
    display: none
}

用户仍然可以拖放图片。

Answer 8

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

Answer 9

//Disable image button

.note-insert.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    display:none;
}

//Disable Video button

.note-insert.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    display:none;
}