KindEditor es un poderoso editor HTML en línea de código abierto que admite los efectos de edición de Wysiwyg. Está escrito en JavaScript y puede integrarse perfectamente con múltiples locales diferentes como .NET, PHP, ASP, Java, etc. El sitio web oficial se puede ver aquí: http://kisditor.net/index.php
Kinderitor en sí proporciona muchos complementos muy prácticos, y debido a que el código es de código abierto, los desarrolladores pueden extenderlo y modificarlo según sea necesario.
Considere este escenario al editar contenido del sitio web usando Kindeditor: los editores tienden a copiar contenido de otras páginas o documentos de Word en el editor de Kindeditor, en lugar de escribir contenido desde una hoja de papel en blanco. Si el contenido copiado contiene imágenes, primero debe descargar la imagen desde la dirección fuente al área local y cargarla en el servidor donde se encuentra este sitio web, de lo contrario la imagen aún apuntará a la página o documento que copió, lo que hará que la imagen no se abra correctamente en la página. Los editores a menudo tienen que procesar muchos documentos, y tales operaciones son indudablemente muy engorrosas. ¿Puede Kinderitor reconocer automáticamente el contenido pegado en él y cargar la imagen en el servidor? El siguiente código implementa esta función.
Para obtener detalles sobre cómo usar Kindeditor en la página, puede ver la documentación oficial del sitio web.
La idea básica de implementar esta función: Agregue el código al evento KeyUp del editor KindEditor para verificar si el editor contiene imágenes; Descubra las imágenes que deben cargarse al servidor automáticamente, llame al programa de carga de imágenes a través de AJAX para cargar las imágenes en el servidor; En la función de devolución de llamada AJAX, cambie la dirección SRC de la imagen correspondiente a la dirección relativa local.
Esta característica no admite copiar y cargar imágenes en Word al servidor.
La imagen de arriba es el resultado final. El programa reconocerá automáticamente el contenido en el editor. Si hay imágenes que deben cargarse, se mostrará un mensaje de inmediato en la parte superior del editor. Cuando el usuario hace clic en el enlace "Cargar", el programa llamará al programa de carga de imágenes a través de la solicitud AJAX y modificará la dirección SRC de la imagen correspondiente a la dirección relativa local en la función de devolución de llamada.
Pasos de implementación específicos y códigos relacionados:
1. Modificación del editor de Kinderitor
Encuentre el archivo Kindeditor.js y agregue el código personalizado en el evento KeyUp (). El código proporcionado por diferentes versiones de Kinderitor puede variar mucho y requerir la búsqueda con la ayuda de documentos oficiales. Este artículo se basa en la versión 4.1.10 de KindEditor.
2. Código de archivo Auto.JS
function df () {var HaspicContainer = document.getElementById ("has_pic"); if (has_pic "== null) {HaspicContainer = document.createElement (" div "); HaspicContainer.id =" Has_Pic "; HaspicContainer.innerhtml =" <input type = 'text' id = 'picList' valor = '' style = 'Display: Ninguno;'/> <Div Div Id = 'Upload <B> al servidor </b> <a href = 'javaScript: uploadPic ();' > Cargar </a> </div> <div id = 'confirmar'> </div> "; $ (". Ke-toolBar "). After (HaspicContainer);} var img = $ (". Ke-edit-iframe "). Contents (). Find (" img "); var = 0; var str ="; $ (img) .each (function (function (I) (que.attr ("src") .indexof ("http: //")> = 0 || that.attr ("src") .indexof ("https: //")> = 0) {piccount ++; $ (img) .Length - 1) strtr += that.attr ("src"); CloseUpload () {$ ("#has_pic"). Hide (); "Pic =" + PicList, Tipo: "Get", BefefeSend: Function () {$ ("#Subia"). Hide (); $ (". Ke-Edit-Iframe"). Contents (). Find ("img"); que.attr ("src", "/uploads/image/" + str [i]); href = 'javaScript: cierreupload ();'> cerrar </a> ");} else $ ("#confirmar "). Text (" ¡Sube fallido! ");});}$ (". Ke-Edit-iFrame"). Contents (). Find ("IMG") se usa para encontrar todas las imágenes en el contenido del editor. Por defecto, el contenido del editor se almacena en el elemento iframe, que tiene la propiedad de class = "ke-edit-iFrame". El programa determinará si el valor de cada atributo SRC de imagen contiene "http: //" o "https: //", determinando así si la imagen es una imagen remota o una imagen local. Si la imagen es una imagen remota, el método AJAX llama a la carga de carga. Al mismo tiempo, modifique la dirección SRC de la imagen correspondiente en la función de devolución de llamada.
3. Código de archivo uploadpic.ashx
public class uploadPic: ihttphandler {public void ProcessRequest (httpContext context) {context.Response.ContentType = "Text/Plain"; cadena pic = context.request.querystring ["Pic"]; cadena [] arr = pic.split ('|'); cadena str = ""; UploadImg st = new uploadImg (); for (int i = 0; i <arr.length; i ++) {if (arr [i] .indexof ("http: //")> = 0 || arr [i] .indexof ("https: //")> = 0) {String std = st.saveurlpics (arr [i], "../../Ploads/image/"); if (std.length> 0) {if (i == arr.length - 1) strr += std; else strr + = std + "|"; }}} context.Response.Write (SSTR); } public bool isReUSable {get {return false; }}} public class uploadImg {public String saveUrlPics (String imGurlary, string ruta) {String strhtml = ""; cadena dirpath = httpcontext.current.server.mappath (ruta); Pruebe {if (! DircTory.exists (dirpath)) {Directory.CreateDirectory (dirpath); } string ymd = dateTime.Now.ToString ("yyyymmdd", datTimeFormatInfo.InvariantInfo); dirpath + = ymd + "/"; if (! dircTory.exists (dirpath)) {directorio.createDirectory (dirpath); } String newFileName = DateTime.Now.ToString ("yyyymmddhmmss_ffff", DateTimeFormatInfo.InvariantInfo) + imgurlary.substring (imgurarlary.lastindexof (".")); WebClient wc = new WebClient (); wc.downloadfile (imgurlary, dirpath + newFileName); strhtml = ymd + "/" + newFileName; } Catch (Exception Ex) {// return Ex.message; } return strhtml; }}La imagen remota se descarga en la ruta relativa del servidor "/uploads/image/" a través del método WebClient, y la carpeta y los nombres de archivo correspondientes se generarán automáticamente de acuerdo con la fecha. El resultado devuelto contiene las direcciones relativas locales de todas las imágenes separadas por "|". En la función uploadPic () del archivo auto.js en el paso 2, el éxito del método de devolución de llamada obtiene el valor y lo analiza, y asigna la dirección al atributo SRC de la imagen correspondiente.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.