有没有办法完全禁用Summernote中的图像上传功能，但保留图像URL输入框? 最接近的方法是使用disableDragAndDrop: true选项，但这不会从图像弹出窗口中删除上传按钮。
禁用Summernote中的图片上传功能
26
- Jonan
9个回答
63
可能有更好的方法来实现您想要的效果......但我想到的一个非常简单的解决方案是将以下内容添加到您的样式表中：
.note-group-select-from-files {
display: none;
}
只留下图片URL输入框的方案是完美的，并且可以实现您想要的效果，除非有人检查元素并发现上传元素仍然存在但被隐藏了：
编辑： 我查看了Summernote源代码，发现上述解决方法实际上是一个不错的选择。目前还没有API可以仅禁用文件上传按钮，更别说在保留图像URL输入时执行此操作了。当然，您可以添加它并打开一个拉取请求。
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>';
- wesww
19
您可以覆盖工具栏并在那里定义自己的按钮集。这是一个示例代码片段：
$("#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文档。
- Aqib Ashef
1
9他/她只是想禁用电脑上传而不是禁用URL上传，所以如果我们使用您的解决方案，它将完全删除图像功能。 - hakkikonu
2
使用Jquery 这对我很有效
$('div.note-group-select-from-files').remove();
或者，如果您想在尝试删除元素之前检查该元素是否存在（如dwilda所建议的）：
var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
imageUploadDiv.remove();
}
- 4Jean
4
2CSS会是更好的方法，因为我们不知道标签何时出现在DOM中。可能没有什么可以remove()。 - dwilda
1没错，dwilda。我只是觉得有些人可能会检查元素并将隐藏的内容反转为可见。 - 4Jean
一点小提示：第二个代码片段是不必要的。如果 jQuery 选择器返回一个空结果集，你仍然可以在这个空集上调用
remove()。不会抛出任何异常。 - The Coprolal我喜欢这种方法，因为通过 CSS 隐藏简单层可以让文件输入保留在我的帖子数组中。如果它不是我表单中想要的字段，我宁愿将其删除而不是简单地隐藏。;) - Mavelo
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">×</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/*" />' +
现在，文件上传输入框已从模态对话框中移除。
- Sulung Nugroho
1
对于summernote .8*版本：
使用以下代码来移除按钮：
.note-insert {
display: none
}
用户仍然可以拖放图片。
- Christopher Furman
0
在阅读了一些代码后，我发现删除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>' +
- Dhruv Saxena
1
通常情况下，除非你想在每次更新后负责维护，否则不建议编辑他人的库。 - Richard
0
$('.note-group-select-from-files').first().remove();
- Aemiro Mekete
0
//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;
}
- Darshan Subhash Khope
1
0
我曾经遇到过同样的问题，看起来很复杂，但你可以简单地重新声明工具栏：
`$('#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']]
]
});`
- Franz Andreani
1
2问题是如何保留通过URL添加图像的功能，但删除上传图像的功能。这将两者都删除，因此并没有回答问题。 - Richard
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接