El proyecto de desarrollo actual involucra cuadros de texto ricos. Después de enterarse de muchos editores de texto ricos, finalmente decidí usar el Ueditor de Du Niang. Razón: tiene funciones potentes y viene con imágenes y cargas de video que están adaptadas al backend de Java.
Galería de proyectos
Sin más preámbulos, la dirección del proyecto es: http://ueditor.baidu.com/website/
Es una lástima que Jianshu no admita los enlaces externos en otros sitios.
Proceso de integración
Transformación de backend
Debido a que el proyecto usa el marco SpringBoot, el soporte de UEDitor para el backend de Java es solo para dar un archivo JSP. Por lo tanto, el archivo debe ser procesado y modificado a un controlador unificado para SpringBoot.
@Controlador @transaccional @requestMapping ("/static/común/ueditor/jsp") public class jspController {@RequestMapping ("/controler") @ResponseBody public void getConfiginfo (httpservletRequest request, htttpServletResponse respuesta) {respuesta.setcontentType ("aplicación/aplicación/aplicación"); String rootPath = request.getSession (). GetServletContext () .getRealPath ("/"); intente {string exec = new Actionenter (request, rootPath) .exec (); PrintWriter Writer = Response.getWriter (); escritor.write (ejecut); escritor.flush (); escritor.close (); } catch (ioException | JSonexception e) {E.PrintStackTrace (); }}Como se mencionó anteriormente, el proyecto admite solicitudes de carga de/Static/Common/Ueditor/JSP/Controller.
Solicitud de front-end
Agregue el soporte de UEDitor en el front-end. Es decir, importe todo el paquete UEDioOtR en un proyecto e importe el JS donde se utiliza el control.
Cuando la introducción del proyecto, mi estructura de código correspondiente es la siguiente:
Introducción de la página, el código correspondiente se introduce de la siguiente manera:
<script type = "text/javaScript" charset = "utf-8" th: src = "@{/static/común/ueditor/ueditor.config.js}"> </script> <script type = "text/javaScript" charset = "utf-8" th: src = "@{/static/común/ueditor/ueditor.all.js.js.js> <//script. Simplemente instanciar el editor de UEDitor. A continuación se presentan mis parámetros de inicialización, solo para referencia.
// Editor de instancia var ue = ue.getEditor (''+id, {Barras de herramientas: [['fontfamily', // font 'font'fontsize', // font size'UNDO ', // ondo', // redo '|', 'emoción', // emoción 'forecolor', // font color'backcolor ', // back color'bold', //Bold'underline', //Unline'strikethrough', //Strikethrough'|', 'justifyleft', //List-align'justifyright', //Right-align'justifycenter', //Center-align'|', 'link', //Hyperlink'unlink', //Unlink 'simpleupload', //Single image upload 'insertimage', // Music ', // Music //' InsertVideo ', // Video', // Clear Format 'FormatMatch', // Format Brush 'Source', // código fuente]], EnlEableUtaSave: false, autoheHeLedEnbiled: true, autofloatenable: true, inicialwidth: width, inicialframeHeight: altura: scaloenable: true // scrollbar};En este punto, verá un cuadro de texto enriquecido al visitar nuestra página.
Sin embargo, nos pedirá que hay un error en el archivo de configuración de fondo y la función de carga no se puede implementar.
Implementar la función de carga
Modifique el archivo config.js y la ruta de solicitud global correspondiente. Esta solicitud es obtener los datos de configuración correspondientes a config.json. Puede devolver directamente la información de configuración en el controlador o leer archivos JSON en el controlador. Estoy utilizando el método de lectura de archivos de configuración aquí, utilizando el método que viene con UEDitor. El artículo se ha implementado al principio. Aquí hay una solicitud que debe modificarse:
Después de completar la configuración anterior, vuelva a cargar la página UEDITOR nuevamente y se puede completar el botón de carga de la imagen.
Nota: Si comienza a la depuración, agregue puntos de interrupción y pruebe al cargar la cadena JSON. Se producirá un error de tiempo de espera. El campo de configuración no se ha encontrado en el archivo de configuración por el momento. Todo, debe tenerse en cuenta aquí. Si todas las configuraciones no son problemáticas, pero el error de configuración de fondo aún se devuelve, puede cancelar todos los puntos de interrupción y probarlo.
Nota: La carga requiere agregar el componente de carga, use fileuoload aquí
<Spendency> <MoupRoMID> Commons-FileUpload </groupId> <artifactId> commons-fileUpload </artifactId> <versión> 1.3 </versión> </pendency>
Use servlet para implementar la carga
/** * Intenta usar servlet para implementar ueditor * * @author onywang * @create 2018-02-05 2:40 **/ @webServlet (name = "ueditorservlet", urlpatterns = "/static/común/ueditor/ueditor") public class UEditorControllerservlet extiende httpservlet {@Ouletride @oRedy DOPOST (HTTPSERVLETREQUEST SOLIT, HTTPServletResponse Respuesta) lanza ServLetException, ioException {request.setcharacterEncoding ("UTF-8"); respuesta.setheader ("Type de contenido", "Text/Html"); PrintWriter out = Response.getWriter (); ServletContext Application = this.getServletContext (); String rootPath = Application.GetRealPath ("/"); String Action = request.getParameter ("Acción"); String result = new Actionenter (request, rootpath+"web-inf/classes") .exec (); if (Action! = Null && (Action.equals ("ListFile") || Action.equals ("ListImage")))) {rootPath = rootpath.replace ("//", "/"); resultado = resultado.replaceAll (rootPath, "/"); } out.write (resultado); } @Override protegido void doget (httpservletRequest req, httpservletResponse resp) lanza ServletException, ioexception {dopost (req, resp); } Use el método Servlet y cree un nuevo servlet anotado.
Debe agregar la anotación @ServletComponentsCan al método principal.
Modifique la ruta de acceso predeterminada de UEDitor.
Nota: En SpringBoot, todos los archivos de recursos se colocan en clases. Todos, ten cuidado al manejar caminos. Agregar rutas a Web-INF/Classes
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.