xhEditor subir palabra de imagen

Después de 1.4.2, el funcionario no ha realizado ningún cambio funcional 1.4.2 No hay ningún error en la sección de copia de Word, y otras versiones no se podrán transferir manualmente.

El backend utilizado en este artículo es Java. La interfaz es Jsp (la interfaz es la misma, si el idioma de fondo no es bueno, debe realizar la codificación y decodificación Base64 usted mismo)

Debido a que el negocio de la empresa necesita ser compatible con IE8, en realidad hay muchos cuadros de texto enriquecidos en Internet y el efecto es muy bueno.

Por ejemplo, www.wangEditor.com no admitió IE8 después de una prueba.

Entonces, volviendo a Ueditor, debido a la falta oficial de mantenimiento, el nuevo neuditor no sabe cuándo admitirá el volcado automático de palabras, por lo que solo puedo encontrar una solución por mí mismo.

Si no es necesario, no se recomienda ueditor. No tengo otra alternativa.

El complemento modificado solo es adecuado para IE8.

El punto que se debe explicar aquí es que el editor oficial de Baidu no admite el volcado por lotes de imágenes de palabras. Después de pegar la palabra, debe seleccionar manualmente la imagen y cargarla nuevamente. La mayoría de los ejemplos que se encuentran en Internet son para esta operación. Si necesita cargar imágenes de palabras en lotes automáticamente, puede usar el control de WordPaster.

 

1. Configuración de IE

Agregue sitios confiables a sitios confiables.

La prueba local aquí es directamente http: // localhost

Debido a que necesita leer el archivo del cliente, debe configurar el permiso para acceder a la fuente de datos.

La configuración de ActiveXObject puede ir a Internet como referencia, no incluida aquí.

frente

Los preparativos para IE ahora están completos.

Modificar el código clave de ueditor.all.js

Cerca de la línea 14006, si es otra versión de ueditor, si la función es normal, puede copiar el siguiente código.

var imgPath = attrs.src;

var imgUrl = attrs.src;

if (navigator.appName === 'Microsoft Internet Explorer') {// Determine si es un navegador IE

    if (navigator.userAgent.match (/ Trident / i) && navigator.userAgent.match (/ MSIE 8.0 / i)) {// Determine si el kernel del navegador es Trident kernel IE8.0

        var realPath = imgPath.substring (8, imgPath.length);

        var filename = imgPath.substring (imgPath.lastIndexOf ('/') + 1, imgPath.length);

        var result = UploadForIE.saveAttachment (nombre de archivo, realPath);

        if (resultado) {

            var json = eval ('(' + resultado + ')');

            imgUrl = json.url;

        }

    }

}

img.setAttr ({

 

    ancho: attrs.width,

    altura: altura attr.,

    alt: attrs.alt,

    word_img: attrs.src,

    src: imgUrl,

    'style': 'background: url (' + (flag? opt.themePath + opt.theme + '/images/word.gif': opt.langPath + opt.lang + '/images/localimage.png') + ' ) centro central sin repetición; borde: 1px sólido #ddd '

})

 

uploadForIE.js。

var UploadForIE = {

    // Guardar como archivo adjunto xml y subirlo a través de ajax

    saveAttachment: function (upload_filename, localFilePath) {

        // El método para aceptar guardar imágenes en segundo plano.

        var upload_target_url = "uploadImg";

        var strTempFile = localFilePath;

        // Crea un objeto XML y combina datos de documentos XML

        var xml_dom = UploadForIE.createDocument ();

        xml_dom.loadXML ('<? xml version = "1.0" encoding = "GBK"?> <root />');

        // Crear objeto ADODB.Stream

        var ado_stream = new ActiveXObject ("adodb.stream");

        // Establecer el tipo de datos del flujo en tipo binario

        ado_stream.Type = 1; // adTypeBinary

        // Abra el objeto ADODB.Stream

        ado_stream.Open ();

        // Cargue el archivo local en el objeto ADODB.Stream

        ado_stream.LoadFromFile (strTempFile);

        // Obtener el tamaño del archivo (en bytes)

        var byte_size = ado_stream.Size;

        // Establezca el tamaño de la unidad de transmisión de datos en 1KB

        var byte_unit = 1024;

        // Obtener el número de unidades de datos divididos de archivos

        var read_count = parseInt ((byte_size / byte_unit) .toString ()) + parseInt (((byte_size% byte_unit) == 0)? 0: 1);

 

        // Cree un nodo de elemento XML y guarde el nombre del archivo cargado

        var node = xml_dom.createElement ("uploadFilename");

        node.text = upload_filename.toString ();

        var root = xml_dom.documentElement;

        root.appendChild (nodo);

 

        // Cree un nodo de elemento XML y guarde el tamaño del archivo cargado

        var node = xml_dom.createElement ("uploadFileSize");

        node.text = byte_size.toString ();

        root.appendChild (nodo);

 

        // Cree un nodo de elemento XML y guarde el contenido del archivo cargado

        para (var i = 0; i <read_count; i ++) {

            var nodo = xml_dom.createElement ("uploadContent");

            // El método de codificación del contenido del archivo es Base64

            node.dataType = "bin.base64";

            // Determine el tamaño del nodo de datos actualmente guardado y realice operaciones de clasificación de acuerdo con las condiciones

            if ((parseInt (byte_size% byte_unit)! = 0) && (i == parseInt (read_count - 1))) {

                // Cuando el tamaño del paquete de datos no es un múltiplo integral de la unidad de datos, lea los últimos datos restantes que sean más pequeños que la unidad de datos

                node.nodeTypedValue = ado_stream.Read ();

            } más {

                // Leer los datos de una unidad de datos completa

                node.nodeTypedValue = ado_stream.Read (byte_unit);

            }

            root.appendChild (nodo);

        }

 

        // Cierre el objeto ADODB.Stream

        ado_stream.Close ();

        eliminar ado_stream;

        // Crear objeto Microsoft.XMLHTTP

        // var xmlhttp = new ActiveXObject ("microsoft.xmlhttp");

        var xmlhttp = window.XMLHttpRequest? new XMLHttpRequest (): nuevo ActiveXObject ("Microsoft.XMLHttp");

        // Abra el objeto Microsoft.XMLHTP

        xmlhttp.open ("publicar", upload_target_url, falso);

        // Cargar archivos usando el objeto Microsoft.XMLHTP

        xmlhttp.send (xml_dom);

        var state = xmlhttp.readyState;

        var success_state = true;

        if (estado! = 4) {

            Success_state = falso;

        }

        var result = xmlhttp.responseText;

 

        eliminar xmlhttp;

        devolver resultado;

    },

 

    // Crear DOMdocuemnt

    createDocument: function () {

        var xmldom;

        var versiones = ["MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument"],

        yo,

        len;

        for (i = 0, len = versions.length; i <len; i ++) {

            tratar {

                xmldom = nuevo ActiveXObject (versiones [i]);

                if (xmldom! = null) romper;

            } atrapar (ex) {

                //salte por encima

                alert ("¡Error al crear el objeto de documento!");

            }

        }

        return xmldom;

    }

}

 

UEditorAction guardar método de imagen

@RequestMapping ("/ uploadImg")

    public void uploadADO (solicitud HttpServletRequest, respuesta HttpServletResponse) {

        String path1 = request.getContextPath ();

        String basePath = request.getScheme () + ": //" + request.getServerName () + ":" + request.getServerPort () + ruta1;

 

        String rootPath = request.getServletContext (). GetRealPath ("/");

        // Establezca el tamaño de la unidad de transmisión de datos en 1KB

        int tamaño_unidad = 1024;

        // Inicializar el tamaño del archivo xml (en bytes)

        int xmlFileSize = 0;

        // Inicializar el nombre del archivo de carga (nombre de archivo completo)

        String xmlFilename = "";

        // Inicializar la ruta de guardado del archivo de carga (ruta física absoluta)

        String xmlFilepath = "";

        // Declarar matriz de bytes de almacenamiento de archivos

        byte [] xmlFileBytes = null;

        tratar {

            // Inicializar el analizador de archivos xml serie SAX

            Constructor SAXBuilder = nuevo SAXBuilder ();

            Documento doc = builder.build (request.getInputStream ());

            Elemento eRoot = doc.getRootElement ();

            // Obtenga el nombre completo del archivo cargado

            Iterador it_name = eRoot.getChildren ("uploadFilename"). Iterator ();

            if (it_name.hasNext ()) {

                xmlFilename = ((Elemento) it_name.next ()). getText ();

            }

            // El directorio de ruta relativa almacenado

            String relatedPath = "/temp/"+EditorUtil.getToday()+"/";

            xmlFilepath = rutaraíz + rutarelativa;

 

            // Obtenga el tamaño del archivo cargado

            Iterador it_size = eRoot.getChildren ("uploadFileSize"). Iterator ();

            if (it_size.hasNext ()) {

                xmlFileSize = Integer.parseInt (((Elemento) it_size.next ())

                        .getText ());

                if (xmlFileSize> 0) {

                    int unit_count = 0;

                    // Asignar espacio de almacenamiento para la matriz de bytes que almacena el contenido del archivo

                    xmlFileBytes = nuevo byte [xmlFileSize];

                    // Leer el contenido del archivo en un bucle y guardarlo en la matriz de bytes

                    Iterador it_content = eRoot.getChildren ("uploadContent")

                            .iterator ();

                    while (it_content.hasNext ()) {

                        // Inicializar el códec Base64

                        BASE64Decoder base64 = nuevo BASE64Decoder ();

                        byte [] xmlNodeByteArray = base64

                                .decodeBuffer (((Elemento) it_content.next ())

                                        .getText ());

                        if (xmlNodeByteArray.length> = unit_size) {

                            // Leer los datos de una unidad de datos completa

                            System.arraycopy (xmlNodeByteArray, 0, xmlFileBytes,

                                    unit_count * unit_size, unit_size);

                        } más {

                            // Leer todos los datos de menos de una unidad de datos

                            System.arraycopy (xmlNodeByteArray, 0, xmlFileBytes,

                                    unit_count * unit_size, xmlFileSize

                                            % tamaño de la unidad);

                        }

                        // Continuar leyendo el contenido del archivo hacia abajo

                        unit_count ++;

                    }

                }

            }

 

            // guardar ruta

            Ruta de archivo = nuevo archivo (xmlFilepath);

            if (! path.exists ()) {

                ruta.mkdirs ();

            }

            // Guarda la palabra del archivo y pega el nombre de la imagen

            Archivo archivo = nuevo archivo (ruta, xmlFilename);

            // Crear flujo de entrada y salida de archivo

            FileOutputStream fos = nuevo FileOutputStream (archivo);

            // escribir el contenido del archivo

            fos.write (xmlFileBytes);

            fos.flush ();

            // Cerrar el flujo de entrada y salida del archivo

            fos.close ();

 

            ReturnUploadImage rui = nuevo ReturnUploadImage ();

            rui.setTitle (xmlFilename); // El nombre del archivo debe establecerse aquí, como por ejemplo: xxx.jpg

            rui.setOriginal (xmlFilename); // El nombre del archivo debe establecerse aquí, como por ejemplo: xxx.jpg

            rui.setState ("ÉXITO");

            rui.setUrl (ruta base + ruta relativa + nombrearchivo xml);

 

            JSONObject json = new JSONObject (rui);

            String result = json.toString (); // Esta es la conversión de formato para regresar a UEditor

            response.getWriter (). write (resultado);

        } captura (Excepción e) {

            e.printStackTrace ();

        }

    }

Código optimizado:

upload.jsp

<% @ page language = "java" import = "java.util. *" pageEncoding = "utf-8"%>

<% @ page contentType = "text / html; charset = utf-8"%>

<% @ page import = "Xproer. *"%>

<% @ page import = "org.apache.commons.lang.StringUtils"%>

<% @ page import = "org.apache.commons.fileupload. *"%>

<% @ page import = "org.apache.commons.fileupload.disk. *"%>

<% @ page import = "org.apache.commons.fileupload.servlet. *"%>

<% out.clear ();

/ * 

    registro de actualización:

        2013-01-25 Cancele el uso de SmartUpload y utilice el componente commons-fileupload en su lugar. Porque la prueba encontró que SmartUpload tiene una pérdida de memoria.

* /

// Ruta de la cadena = request.getContextPath ();

// String basePath = request.getScheme () + ": //" + request.getServerName () + ":" + request.getServerPort () + ruta + "/";

 

String uname = ""; // = request.getParameter ("uid");

String upass = ""; // = request.getParameter ("fid");

 

// Compruebe que tenemos una solicitud de carga de archivos

boolean isMultipart = ServletFileUpload.isMultipartContent (solicitud);

Fábrica de FileItemFactory = new DiskFileItemFactory ();  

ServletFileUpload upload = nuevo ServletFileUpload (fábrica);

//upload.setSizeMax(262144);//256KB

Listar archivos = nulo;

tratar

{

    files = upload.parseRequest (solicitud);

}

captura (FileUploadException e)

{// Manejo de la excepción de tamaño de archivo 

    out.println ("Excepción de carga de archivo:" + e.toString ());

    regreso;

  

}

 

FileItem imgFile = null;

// Obtener todos los archivos cargados

Iterador fileItr = files.iterator ();

// Recorre todos los archivos

while (fileItr.hasNext ())

{

    // Obtener el archivo actual

    imgFile = (FileItem) fileItr.next ();

    // Ignora el campo de formulario simple en lugar del campo de archivo del campo de carga (<input type = "text" /> etc.)

    si (imgFile.isFormField ())

    {

        Cadena fn = imgFile.getFieldName ();

        String fv = imgFile.getString ();

        if (fn.equals ("uname")) uname = fv;

        if (fn.equals ("upass")) upass = fv;

    }

    más

    {

        descanso;

    }

}

Uploader up = new Uploader (pageContext, request);

up.SaveFile (imgFile);

String url = up.GetFilePathRel ();

out.write (url);

response.setHeader ("Content-Length", url.length () + ""); // Devuelve la etiqueta Content-length para que el control pueda leer la dirección de retorno correctamente.

%>

 

Para el resto de funciones en segundo plano y js, consulte UEditorAction y uploadForIE.js en el archivo de descarga.

La siguiente es la estructura de pom dependiente que instalé, que se puede ajustar según la mía.

  <dependencia>

            <groupId> com.baidu </groupId>

            <artifactId> ueditor </artifactId>

            <version> 1.1.0 </version>

        </dependencia>

 

Basado en springboot e idea, aquí solo se extrajo la función de volcado automático. La función aún no se ha probado, y el código git no se ha hecho público, y se hará público después de las pruebas posteriores.

Puede usar csdn para descargar y ver el código primero.

ueditor.jar se hace referencia en pom

Necesita instalar el paquete jar según su situación

La versión del paquete jar en 1.4.2 es 1.1.0

mvn install: install-file -DgroupId = com.baidu -DartifactId = ueditor -Dversion = 1.1.0 -Dpackaging = jar -Dfile = \ ueditor \ jsp \ lib \ ueditor-1.1.0.jar

correr

Método principal de UeditorApplication

Luego visite http: // localhost: 8088 / ueditor / para probar.

 

El efecto después de la finalización:

Las imágenes se cargan en lotes automáticamente, no es necesario seleccionar manualmente las imágenes para cargarlas una por una, la experiencia del usuario es mejor que la de Baidu ueditor y la eficiencia de carga es mayor.

 

Una vez que la carga es exitosa, la dirección de la imagen se reemplaza automáticamente con la dirección del servidor

 

La imagen se guarda automáticamente en el servidor.

 

Para obtener más información, consulte este artículo:

http://blog.ncmem.com/wordpress/2019/08/12/ueditor-word%E5%9B%BE%E7%89%87%E8%BD%AC%E5%AD%98%E4%BA% A4% E4% BA% 92 /

 

Grupo de discusión: 223813913

Supongo que te gusta

Origin blog.csdn.net/weixin_45525177/article/details/108483908
Recomendado
Clasificación