Question

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

Answer 1

这可能是一种更好的方式来实现您的目标......但是一个非常简单的解决方案就是将其添加到您的样式表中：

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

完全只留下图片网址输入，并完成你要去的东西，除非有人检查元素并发现上传元素仍然存在且显示无：

编辑：我看了一下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

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

$("#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 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/*" />' +

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

Answer 4

使用Jquery 这对我有用

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

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

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

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

Answer 6

对于summernote版本.8*

使用以下命令删除按钮：

.note-insert {
    display: none
}

用户仍然可以拖放图片。

Answer 7

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

Answer 8

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

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

在Summernote中禁用图片上传

8 个答案: