javascript - drop - Deshabilitar la carga de la imagen en Summernote

summernote toolbar air mode

Question

¿Hay alguna forma de desactivar completamente la carga de imágenes en Summernote, pero mantener la entrada de la URL de la imagen? Lo más cercano que encontré fue la opción disableDragAndDrop: true , pero esto no elimina el botón de carga de la disableDragAndDrop: true emergente de imagen

Answer 1

Después de leer un poco del código que encontré al eliminar este código en summernote.js, se eliminará esa FUNCIÓN DE CARGA

Simplemente elimine este formulario de su archivo, ya que cualquiera de las respuestas anteriores no funcionará para mí

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

Encuentra este código en 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>'';
};

Quitar este código:

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

Ahora la entrada de carga del archivo se elimina del diálogo modal.

Answer 3

Probablemente haya una mejor manera de lograr lo que está buscando ... pero una solución muy simple que viene a la mente es simplemente agregar esto a sus hojas de estilo:

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

Funciona perfectamente para dejar solo la entrada de la url de la imagen, y logra lo que se busca a menos que alguien inspeccione el elemento y descubra que el elemento de carga aún no muestra ninguna:

Edición: Eché un vistazo al código fuente de Summernote, y parece que la solución anterior es realmente una buena manera de hacerlo. Actualmente no hay una API para deshabilitar solo el botón de carga de archivos, y mucho menos hacerlo mientras se deja intacta la entrada img url. Siempre se puede agregar y abrir una solicitud de extracción, por supuesto.

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 4

Puede anular la barra de herramientas y definir su propio conjunto de botones allí. Aquí hay un código de ejemplo:

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

Este código genera la barra de herramientas sin la opción de inserción de video e imagen y con todas las demás opciones disponibles. Puedes consultar la documentación detallada de la API here .

Answer 5

Tuve el mismo problema y parece ser complicado, pero simplemente puede volver a declarar la barra de herramientas:

 `$(''#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 6

Usando Jquery Esto funcionó para mí

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

O si (como lo sugiere dwilda) desea verificar que el elemento existe antes de intentar eliminarlo:

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