Recientemente, debido a los requisitos del proyecto, se necesita un cuadro de edición de texto front-end, con la función de la carga en tiempo real de imágenes. Comparé varios complementos en línea. Primero, fue el Ueitor de Baidu y descubrió que el marco era demasiado grande. No era lo que quería ver si un pequeño marco introdujo tantos archivos; En segundo lugar, fue Easyui de JQuery. Aunque la versión personal es gratuita, el proyecto pertenece al negocio de la compañía, y parece que no es apropiado usar la versión comercial del marco. Teniendo en cuenta que la parte delantera del proyecto se basa principalmente en Bootstrap, el complemento Bootstrap-Wysiwyg finalmente fue seleccionado, lo cual es muy simple, liviano y altamente extensible.
Es muy conveniente introducir bootstrap-wysiwyg e implementar la función de edición de texto, pero noté que la carga de imágenes se implementa utilizando FILEAPI. Para la mayoría de los sitios web, aunque la experiencia del usuario sin cargar es muy buena con Fileapi, cuando en realidad se almacena en la base de datos, todavía esperamos almacenar la ruta estática de la imagen en el servidor en lugar de imágenes de cadena. En resumen, necesitamos hacer un poco de reescritura de Bootstrap-Wysiwyg (en adelante denominado WY).
Primero, observemos los controles de imagen en la página. Omita los otros controles y verifique el código fuente. Es fácil encontrar el siguiente código:
<Viv> <a id = "ImageBtn"> <i> </i> </a> <input type = "file" data-role = "magic-overlay" data-target = "#imageBtn" data-edit = "insertimage"/> </div>
Hagamos una explicación. Las propiedades de la roles de datos y el objetivo de datos son eventos predefinidos en Bootstrap. Aquí podemos entenderlo como relacionado con el diseño, sin considerarlo. El punto clave está aquí. El tercer edición de datos de la propiedad, no existe tal evento en Bootstrap. Observe bootstrap-wysiwyg.js, puede encontrar algunos códigos como este:
Tool Bar.Find ('input [type = file] [data-' + options.commandrole + ']') .change (... ... commandRole: 'editar',En otras palabras, esta propiedad realmente se implementa para facilitar los selectores, que es equivalente a agregar un evento de oyente al botón de imagen.
Continuemos estudiando la implementación de la vista previa de la imagen de WY. El primer paso es, como se muestra en el código anterior, el oyente capta el evento de cambio de FileInput, responde y llama a la función InsertFiles
restaurreselection (); if (this.type === '' file '&& this.files && this.files.length> 0) {insertFiles (this.files);} saveSelection (); his.Value = '';Encontrar la función InsertFiles
insertFiles = function (archivos) {editor.focus (); $ .each (archivos, function (idx, fileInfo) {if (/^image//.test(fileInfo.type)) {$ .when (readFileIntodataurl (fileInfo)). Done (function (dataUrl) {execCommand ('insertiMage', dataUrl);}). Fail (function (e) { OPTIONS.FILEUPLOAdError ("Lector de archivos", e); }Notamos que usa el método $ .deferred () de jQuery, primero llamado readFileIntodataurl, y luego genera con éxito la imagen al cuadro de texto a través del método EXECCOMMAND autoinsulado. Esta imagen es en realidad una etiqueta <img>, pero el atributo SRC es una imagen representada por una cadena. Entonces, lo que debemos hacer es cargar el archivo después de que se active el oyente, obtener el SRC de la imagen y luego entregar el enlace al método ExecCommand posterior.
Dado que el autor no está muy familiarizado con Diferred, todavía usa el modo de devolución de llamada más común
Observe el método de llamada de AjaxFileUpload:
$ .JAJAXFILEUPLOAD ({url: ..., SecureUrl: false, fileElementId: ..., DataType: "Json", Success: function (obj) {...}, error: function () {...}});Hay dos propiedades requeridas, URL y FileElementId. Para mantener la corrección de la dependencia, no es aconsejable reescribir AJAXFILEUPLOAD. Sin embargo, dado que el control WY es implementado por un oyente, no es realista pasar los parámetros a través de funciones, por lo que necesitamos definir algunas propiedades para el cuadro de entrada nosotros mismos para lograr nuestro objetivo.
Agregue algunas propiedades en FileInput
<input type = "file" id = "imageInput" name = "picture" data-role = "mágico-overlala" data-target = "#pictureBtn" data-edit = "insertimage" action = "..." />
ID se usa como FileElementId, y el atributo de nombre también es necesario, principalmente para la selección del valor de fondo, la acción es la URL de que la imagen debe enviarse.
Definir una función en bootstrap-wysiwyg.js llamado zoadfiletoserver, el formato de función es el siguiente:
var uploadFiletoserver = function (id, acción, devolución de llamada) {$ .AJAXFILEUPLOAD ({url: action, secureUrl: false, fileElementId: id, DataType: 'json', éxito: function (obj) {if (obj.status) {callback (obj.imgsrc);} más OPTION.FILEUPLOAdError ("Server-Internal-Exception", obj.message);Reescribe el método InsertFiles de la siguiente manera:
insertFiles = function (archivos, id, acción) {editor.focus (); $ .each (archivos, function (idx, fileInfo) {if (/^image///.test(fileInfo.type)) {/ * * $ .When (readFileInToDataurl (fileInfo)). Done (function (dataRURL) { * execCCoCCOMAND ('insertiMage', dataUrl);}). fail (function (e) OPTION.FILEUPLOAdROR ("File-Reader", E);Al mismo tiempo, haga ciertas modificaciones al oyente para obtener los atributos necesarios
ToolBar.Find ('input [type = file] [data-' + options.commandrole + ']) .Change (function () {restaurresElection (); if (this.type ====' file '&& this.files && this.files.length> 0) {insertFiles (this.files, $ (this) .attr (' id '), $ (this) .attR (»). SaveSelection ();Principalmente, se han agregado dos posiciones de parámetros.
De esta manera, la reescritura está completa. Tenga en cuenta que para asegurarse de que se realice la ejecución correcta, consulte AjaxFileUpload.js antes del control.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
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.