Forma simple de implementar la función de carga de imágenes en Summernote

Continuaré escribiendo una página web de bootstrap como dije antes ... y luego usaré un editor de texto enriquecido, solo búscalo y seleccione

Luego encontré un problema muy vergonzoso ... la función de carga de la imagen no es válida ... entonces varias búsquedas son infructuosas ... Finalmente, pasé a través del documento oficial de Summernote y finalmente lo resolví. En resumen, escribí el proceso de solución.

La parte de backend no proporciona código, está lleno de personas. Aquí, suponiendo que el backend obtiene el archivo cargado y devuelve la dirección del archivo.

Primero, adjunte los materiales de referencia: Documento de desarrollo oficial de Summernote

Hable brevemente sobre el plan de implementación de la función de carga de imágenes de Summernote

Primero, de acuerdo con la API proporcionado por el documento oficial, adjunte el evento de carga de archivos, luego use JS para volver a cargar el archivo y finalmente use la API para insertar la imagen en el cuadro de edición.

Fue una pregunta muy simple, pero desafortunadamente el funcionario no sabía por qué se escribió la interfaz ... y luego toda la información que busqué en línea fue engañada ... aunque hubo razones por las que no busqué lo suficientemente profundamente.

En resumen, las dos API de Summernote Core se resuelven, tomando el control de los eventos de carga de archivos e insertando imágenes, y el formato es el siguiente de acuerdo con la documentación oficial.

 // Take On Image Subload Event $ ('#Summernote'). Summernote ({Callbacks: {OnImageUpload: function (files) {// cargar la imagen en el servidor e insertar la imagen en el cuadro de edición}}}); // Insertar la imagen $ ('#Summernote'). Summernote ('SummerMage', url, FileName); // para obtener más detalle de la imagen $ (#Summernote '). Vea el Summernote (Insertar el Summernote (Insertar el Suminote. proporcionado arriba

Luego puede implementar fácilmente el cuadro de edición Summernote que admite cargar imágenes

El código es el siguiente:

 $ ('#Summernote'). Summernote ({Callbacks: {onImageUpload: function (files) {// cargue la imagen en el servidor, usando el objeto FormData. En cuanto a la compatibilidad ... se dice que no es muy amigable con la versión de bajo Ie var FormData = New FormData (); FormData.append ('File', files [0]); $. 'upload', // Tipo de interfaz de carga de archivo de fondo: 'Post', Data: FormData, ProcessData: False, ContentType: False, Success: Function (Data) {$ ('#Summernote').

Finalmente, esto solo implementa la función de carga de imagen más simple, que tiene una compatibilidad deficiente y no considera que la excepción de error indique en absoluto ... Modifíquela usted mismo según sea necesario

La forma simple de implementar la función de carga de imágenes en Summernote es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.