javascript 在 Summernote 中禁用图像上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33615669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable image upload in Summernote
提问by Jonan
Is there any way to completely disable uploading of images in Summernote, but keep the image url input? The closest thing I found was the disableDragAndDrop: trueoption, but this doesn't remove the upload button from the image pop-up
有什么办法可以完全禁止在 Summernote 中上传图片，但保留图片 url 输入？我发现最接近的是disableDragAndDrop: true选项，但这不会从图像弹出窗口中删除上传按钮
回答by wesww
There's probably a better way to accomplish what you're going for... but a very simple solution that comes to mind is to just add this to your stylesheets:
可能有更好的方法来完成您的目标......但是想到的一个非常简单的解决方案是将其添加到您的样式表中：
.note-group-select-from-files {
display: none;
}
It works perfectly to leave just the image url input, and accomplishes what you're going for unless someone were to inspect element and discover that the upload element still exists with display none:
它可以完美地保留图像 url 输入，并完成您要执行的操作，除非有人要检查元素并发现上传元素仍然存在且不显示：
Edit : I took a look at the Summernote source code, and it looks like the above solution is actually a good way to go. There's currently no api to disable just the file upload button, let alone do so while leaving the img url input intact. You could always add it and open a pull request, of course.
编辑：我查看了 Summernote 源代码，看起来上面的解决方案实际上是一个不错的方法。目前没有 api 来禁用文件上传按钮，更不用说在保持 img 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>';
回答by Aqib Ashef
You can override the toolbar and define your own set of buttons there. Here is a sample 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' ] ]
]
});
This code generates the toolbar without video and image insert option and with all other options available. You can check the detail API documentation here.
此代码生成没有视频和图像插入选项以及所有其他可用选项的工具栏。您可以在此处查看详细的 API 文档。
回答by Sulung Nugroho
Find this code in summernote.js
在 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>';
};
Remove this code :
删除此代码：
'<h5>' + lang.image.selectFromFiles + '</h5>' +
'<input class="note-image-input" type="file" name="files" accept="image/*" />' +
Now file upload input is remove from modal dialog.
现在文件上传输入从模态对话框中删除。
回答by 4Jean
Using JqueryThis worked for me
使用 Jquery这对我有用
$('div.note-group-select-from-files').remove();
Or if (as suggested by dwilda) you want to check that the element exists before attempting to remove it:
或者，如果（如 dwilda 所建议的）您想在尝试删除元素之前检查该元素是否存在：
var imageUploadDiv = $('div.note-group-select-from-files');
if (imageUploadDiv.length) {
imageUploadDiv.remove();
}
回答by Franz Andreani
I had the same problem and it seems to be complicated but you can simply redeclare the toolbar:
我遇到了同样的问题，它似乎很复杂，但您可以简单地重新声明工具栏：
`$('#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']]
]
});`
回答by Christopher Furman
For summernote version .8*
对于 Summernote 版本 .8*
Use the following to remove the button:
使用以下方法删除按钮：
.note-insert {
display: none
}
Users will still be able to drag and drop pictures.
用户仍然可以拖放图片。
回答by Dhruv Saxena
After reading a bit of code i found by removing this code in summernote.js will remove that UPLOAD FEATURE
在阅读了一些代码后，我发现通过在 summernote.js 中删除此代码将删除该上传功能
Just remove this form your file as any of above answers won't work for me
只需删除此表单您的文件，因为上述任何答案对我都不起作用
'<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>' +
