Le projet de développement actuel implique de riches zones de texte. Après avoir appris de nombreux éditeurs de texte riches, j'ai finalement décidé d'utiliser Ueditor de Du Niang. Raison: il a des fonctions puissantes et est livré avec des images et des téléchargements vidéo qui sont adaptés au backend Java.
Galerie de projets
Sans plus tarder, l'adresse du projet est: http://ueditor.baidu.com/website/
Il est dommage que Jianshu ne prenne pas en charge les liens externes sur d'autres sites.
Processus d'intégration
Transformation backend
Étant donné que le projet utilise le framework Springboot, la prise en charge d'Ueditor pour le backend Java est uniquement pour donner un fichier JSP. Par conséquent, le fichier doit être traité et modifié en contrôleur unifié pour Springboot.
@ Contrôleur @ transactional @ requestmapping ("/ static / commun / ueditor / jsp") public class jspController {@RequestMapping ("/ contrôleur") @ResponseBody public void getConfiginfo (httpservletTequest request, httpservletResponse réponse) {réponse.setContentType ("application / json"); String rootpath = request.getSession (). GetServletContext () .getRealPath ("/"); try {String exec = new ActionNer (request, rootpath) .exec (); Printwriter writer = réponse.getWriter (); writer.write (exec); écrivain.flush (); écrivain.close (); } catch (ioException | jSonException e) {e.printStackTrace (); }}Comme mentionné ci-dessus, le projet prend en charge les demandes de téléchargement de / static / commun / ueditor / jsp / contrôleur.
Demande frontale
Ajoutez un support UEditor dans le front-end. Autrement dit, importez l'intégralité du package UEDIOOTR dans un projet et importez le JS où le contrôle est utilisé.
Lors de l'introduction du projet, ma structure de code correspondante est la suivante:
Introduction de la page, le code correspondant est introduit comme suit:
<script type = "text / javascript" charset = "utf-8" th: src = "@ {/ static / commun / ueditor / ueditor.config.js}"> </ script> <script type = "text / javascrip Instanciez simplement l'éditeur UEditor. Vous trouverez ci-dessous mes paramètres d'initialisation, pour référence uniquement.
// éditeur d'instanciation var ue = ue.getEditor ('' + id, {barreaux: [['Fontfamily', // font 'font'fontsize', // Font size'undo ', // undo', // redo '|', ',' émotion ', // émotion'Forcolor', // Font Color'backcolor ' // Bold'underline ', // Unline'strikethrough', // Strikethrough '|', 'Justifyleft', // list-align'justrighright ', // droit-align'JustifyCenter', // Centre-Align '|', ',' Link ', // HyperLink'unlink', // inconte // musique ', // music //' insertvideo ', // video', // clear format 'formatmatch', // format brush 'source', // source code]], capableAutosave: false, autooHeightSenabled: true, autofloatéable: true, initialframewidth: width, initialframeHeight: hight, scaleenabled: true //crollbar});À ce stade, vous verrez une zone de texte riche lors de la visite de notre page.
Cependant, il nous invitera qu'il existe une erreur dans le fichier de configuration d'arrière-plan et que la fonction de téléchargement ne peut pas être implémentée.
Implémenter la fonction de téléchargement
Modifiez le fichier config.js et le chemin de demande global correspondant. Cette demande consiste à obtenir les données de configuration correspondant à config.json. Vous pouvez renvoyer directement les informations de configuration dans le contrôleur ou lire les fichiers JSON dans le contrôleur. J'utilise la méthode de lecture des fichiers de configuration ici, en utilisant la méthode fournie avec UEditor. L'article a été mis en œuvre au début. Voici une demande qui doit être modifiée:
Après avoir terminé la configuration ci-dessus, chargez à nouveau la page Ueditor et le bouton de téléchargement de l'image peut être terminé.
Remarque: Si vous commencez le mode de débogage, ajoutez des points d'arrêt et testez lors du chargement de la chaîne JSON. Une erreur de délai d'expiration se produira. Le champ de configuration n'a pas été trouvé dans le fichier de configuration pour le moment. Tout cela doit être noté ici. Si toutes les configurations ne sont pas problématiques, mais que l'erreur de configuration d'arrière-plan est toujours renvoyée, vous pouvez annuler tous les points d'arrêt et l'essayer.
Remarque: le téléchargement nécessite d'ajouter le composant de téléchargement, utilisez FileUoload ici
<dependency> <proupId> Commons-fileupload </proupId> <Artifactid> Commons-fileupload </ artifactid> <version> 1.3 </ version> </pedidency>
Utiliser le servlet pour implémenter le téléchargement
/ ** * Essayez d'utiliser Servlet pour implémenter UEditor * * @Author Onywang * @create 2018-02-05 2:40 ** / @ WebServlet (name = "ueditorServlet", UrlPatternS = "/ static / commun / uediter / ueditor") Public Class ueditorControllerservlet extend hTTTServer DOPOST (HttpServLetRequest Request, HttpServletResponse Response) lève ServletException, ioException {request.SetcharAtterencoding ("utf-8"); Response.SetHeader ("Content-Type", "Text / Html"); Printwriter out = réponse.getWriter (); ServletContext application = this.getServletContext (); String rootPath = application.getRealPath ("/"); String Action = request.getParameter ("Action"); String result = new ActionNer (request, rootpath + "web-inf / classes") .exec (); if (action! = null && (action.equals ("listfile") || action.equals ("listImage")))) {rootpath = rootpath.replace ("//", "/"); result = result.replaceAll (rootpath, "/"); } out.write (résultat); } @Override Protected void doGet (httpServletRequest req, httpservletResponse resp) lève ServletException, ioException {doPost (req, resp); } Utilisez la méthode du servlet et créez un nouveau servlet annoté.
Vous devez ajouter l'annotation @ServletComponentScan dans la méthode principale.
Modifiez le chemin d'accès par défaut de UEditor.
Remarque: Sous Springboot, tous les fichiers de ressources sont placés sous les classes. Tous, soyez prudent lors de la gestion des chemins. Ajouter des chemins à Web-inf / classes
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.