O atual projeto de desenvolvimento envolve caixas de texto ricas. Depois de aprender sobre muitos editores de texto ricos, finalmente decidi usar o Ueditor de Du Niang. Motivo: ele tem funções poderosas e vem com fotos e uploads de vídeo que são adaptados ao back -end do Java.
Galeria de Projetos
Sem mais delongas, o endereço do projeto é: http://ueditor.baidu.com/website/
É uma pena que Jianshu não suporta links externos em outros sites.
Processo de integração
Transformação de back -end
Como o projeto usa a estrutura de troca, o suporte do Ueditor para o back -end do Java é apenas para fornecer um arquivo JSP. Portanto, o arquivo precisa ser processado e modificado em um controlador unificado para o Springboot.
@Controlador @transactional @requestmapp ("/static/common/ueditor/jsp") classe pública jspController {@RequestMapping ("/controlador") @ResponseBody public void getConfiginfo (httpServletRequest request, httpsletReponsonsonsonsoornet) {Response.setContenttty Solicitação httpsLeResponse); String rootpath = request.getSession (). GetServletContext () .getRealPath ("/"); tente {string Exec = new ActionEnter (request, rootpath) .exec (); PrintWriter Writer = Response.getWriter (); writer.write (exec); writer.flush (); writer.close (); } catch (ioexception | jsonexception e) {e.printStackTrace (); }}Como mencionado acima, o projeto suporta solicitações de upload de/static/Common/ueditor/jsp/controlador.
Solicitação front-end
Adicione o suporte do Ueditor no front-end. Ou seja, importe todo o pacote UEDIOOTR para um projeto e importe o JS onde o controle é usado.
Quando a introdução do projeto, minha estrutura de código correspondente é a seguinte:
Introdução à página, o código correspondente é introduzido da seguinte forma:
<script type = "text/javascript" charset = "utf-8" th: src = "@{/static/common/ueditor/ueditor.config.js}"> </script> <script type = "text/javascript" charset = "utf-8" th: src = "@{/static/common/ueditor/ueditor.all.js}"> </sCript> Basta instanciar o editor do Ueditor. Abaixo estão meus parâmetros de inicialização, apenas para referência.
// editor de instanciação var ue = ue.getEditor (''+id, {barras de ferramentas: [['fontfamily', // font 'font'fontsize', // font size'undo ', // undo', // redo '| //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', // formato pincel 'fonte', // código -fonte]], enableautosAve: false, scallAlAlabled »altureen: altureen, altura, altura, altura: altionAlated;Neste ponto, você verá uma caixa de texto rica ao visitar nossa página.
No entanto, isso nos solicitará que exista um erro no arquivo de configuração em segundo plano e a função de upload não pode ser implementada.
Implementar função de upload
Modifique o arquivo config.js e o caminho de solicitação global correspondente. Esta solicitação é obter os dados de configuração correspondentes ao config.json. Você pode retornar diretamente informações de configuração no controlador ou ler arquivos JSON no controlador. Estou usando o método de leitura de arquivos de configuração aqui, usando o método que vem com o Ueditor. O artigo foi implementado no início. Aqui está um pedido que precisa ser modificado:
Depois de concluir a configuração acima, carregue a página do ueditor novamente e o botão de upload da imagem pode ser concluído.
Nota: Se você iniciar o modo de depuração, adicione pontos de interrupção e teste ao carregar a string json. Um erro de tempo limite ocorrerá. O campo de configuração não foi encontrado no arquivo de configuração por enquanto. Tudo, deve ser observado aqui. Se todas as configurações não forem problemáticas, mas o erro de configuração em segundo plano ainda for retornado, você pode cancelar todos os pontos de interrupção e experimentá -lo.
NOTA: O upload requer a adição do componente de upload, use o FileUoload aqui
<Depencency> <voundid> Commons-FileUpload </proupId> <TRARFACTID> Commons-FileUpload </ArtifactId> <versão> 1.3 </versão </dependency>
Use o servlet para implementar o upload
/** * Tente usar o servlet para implementar o ueditor * * @author onywang * @create 2018-02-05 2:40 **/ @webServlet (name = "ueditorServlet", URLPATTERNS = "STETATIC/Common/ueditor/uEditor) Public Class @STERROLSERVENNENS EXTENÇÕES DoPost (solicitação httpServletRequest, resposta httpServletResponse) lança servletexception, ioexception {request.setcharacterencoding ("utf-8"); Response.setheader ("conteúdo-tipo", "text/html"); PrintWriter out = Response.getWriter (); ServletContext aplicativo = this.getServletContext (); String rootpath = application.getRealPath ("/"); String action = request.getParameter ("ação"); String resultado = new ActionEnter (solicitação, rootpath+"web-inf/classes") .exec (); if (ação! = null && (action.equals ("listfile") || action.equals ("listimage")))) {rootpath = rootpath.replace ("//", "/"); resultado = resultado.replaceall (rootpath, "/"); } out.write (resultado); } @Override Protected Void Doget (httpServletRequest req, httpServletResponse resp) lança servletexception, ioexception {dopost (req, resp); } Use o método do servlet e crie um novo servlet anotado.
Você precisa adicionar a anotação @ServletConentsCan ao método principal.
Modifique o caminho de acesso padrão do Ueditor.
NOTA: No Springboot, todos os arquivos de recursos são colocados em classes. Tudo, tenha cuidado ao lidar com os caminhos. Adicionar caminhos às classes da Web-Inf/
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.