Das aktuelle Entwicklungsprojekt umfasst reichhaltige Textfelder. Nachdem ich viele reiche Textredakteure erfahren hatte, beschloss ich schließlich, Du Niangs Ueditor zu verwenden. Grund: Es hat leistungsstarke Funktionen und enthält Bilder und Video -Uploads, die an das Java -Backend angepasst sind.
Projektgalerie
Ohne weiteres lautet die Adresse des Projekts: http://ueditor.baidu.com/website/
Schade, dass Jianshu externe Links auf anderen Websites nicht unterstützt.
Integrationsprozess
Backend -Transformation
Da das Projekt das Springboot -Framework verwendet, besteht die Unterstützung des Ueditors für das Java -Backend nur darin, eine JSP -Datei zu geben. Daher muss die Datei verarbeitet und an einen einheitlichen Controller für Springboot geändert werden.
@Controller@Transactional@RequestMapping("/static/common/ueditor/jsp")public class JSPController { @RequestMapping("/controller") @ResponseBody public void getConfigInfo(HttpServletRequest request,HttpServletResponse response){ response.setContentType("application/json"); String rootPath = request.getSession (). GetServletContext () .getRealPath ("/"); try {string exec = new actionenter (request, rootPath) .exec (); Printwriter writer = response.getWriter (); writer.write (exec); writer.flush (); writer.close (); } catch (ioException | jSonexception e) {e.printstacktrace (); }}Wie oben erwähnt, unterstützt das Projekt Upload -Anfragen von/static/Common/Ueditor/JSP/Controller.
Front-End-Anfrage
Fügen Sie den Ueditor-Unterstützung im Front-End hinzu. Importieren Sie das gesamte Uediootr -Paket in ein Projekt und importieren Sie die JS, in der die Kontrolle verwendet wird.
Bei der Einführung von Projekten lautet meine entsprechende Codestruktur wie folgt:
Seite Einführung in Seite wird der entsprechende Code wie folgt eingeführt:
<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> Sofortige Instanziierung des Ueditor -Editors. Im Folgenden finden Sie meine Initialisierungsparameter nur als Referenz.
// Instantiation Editor var ue = ue.geteditor (''+id, {Symbollbars: [['fontfamily', // font 'font'fontsize', // font size'undo ', // rückgängig', // Redo '|', 'Emotion', // Emotion 'Fontal' //Bold'underline', //Unline'strikethrough', //Strikethrough'|', 'justifyleft', //List-align'justifyright', //Right-align'justifycenter', //Center-align'|', 'link', //Hyperlink'unlink', //Unlink 'simpleupload', //Single image upload 'insertimage', //Music', // musik // 'insertvideo', // Video ', // Format' FormatMatch ', // Format -Pinsel' Source ', // Quellcode], EnableAutosave: Falsch, autoheighennabled: true, autoflotenabled: true, true, initialFramewidth: widthth, initialFraEths, Höhe: scaleenabled: scaleenabled: wahre ///// //// // Scrollbar}).Zu diesem Zeitpunkt sehen Sie ein reichhaltiges Textfeld, wenn Sie unsere Seite besuchen.
Wir fordern uns jedoch auf, dass in der Hintergrundkonfigurationsdatei ein Fehler vorliegt und die Upload -Funktion nicht implementiert werden kann.
Upload -Funktion implementieren
Ändern Sie die Datei config.js und den entsprechenden globalen Anforderungspfad. Mit dieser Anfrage wird die Konfigurationsdaten erhalten, die Config.json entsprechen. Sie können Konfigurationsinformationen direkt im Controller zurückgeben oder JSON -Dateien im Controller lesen. Ich verwende die Methode zum Lesen von Konfigurationsdateien hier mit der Methode, die mit Ueditor geliefert wird. Der Artikel wurde zu Beginn implementiert. Hier ist eine Anfrage, die geändert werden muss:
Laden Sie nach Abschluss der oben genannten Konfiguration die Ueditor -Seite erneut, und die Upload -Schaltfläche des Bildes kann abgeschlossen werden.
Hinweis: Wenn Sie mit dem Debugging -Modus beginnen, fügen Sie Breakpoints hinzu und testen Sie beim Laden der JSON -Zeichenfolge. Es tritt ein Zeitüberschreitungsfehler auf. Das Konfigurationsfeld wurde vorerst in der Konfigurationsdatei nicht gefunden. Alles, es sollte hier bemerkt werden. Wenn alle Konfigurationen nicht problematisch sind, der Hintergrundkonfigurationsfehler weiterhin zurückgegeben wird, können Sie alle Haltepunkte abbrechen und es versuchen.
HINWEIS: Durch das Aufladen muss die Upload -Komponente hinzugefügt werden. Verwenden Sie hier FileUoload
<De vorhöhe> <gruppe> commons-fileUpload </Groupid> <artifactId> commons-fileUpload </artifactId> <version> 1.3 </Version> </abhängig>
Verwenden Sie Servlet, um Upload zu implementieren
/** * Versuchen Sie, Servlet zu verwenden, um Ueditor zu implementieren Dopost (httpServletRequest-Anforderung, httpServletResponse-Antwort) löst ServletException, IOException {request.setcharactercoding ("utf-8") aus; response.setheader ("Inhaltstyp", "text/html"); Printwriter out = response.getWriter (); ServletContext application = this.getServletContext (); String rootPath = application.getRealPath ("/"); String action = request.getParameter ("action"); String result = new Actionenter (Anfrage, RootPath+"Web-inf/classes") .exec (); if (action! = null && (action.equals ("listFile") || action.equals ("listimage"))) {rootPath = rootPath.replace ("//", "/"); result = result.replaceall (rootPath, "/"); } out.write (Ergebnis); } @Override Protected void dagget (httpServletRequest req, httpServletResponse resp) löscht ServletException, ioException {dopost (req, resp); } Verwenden Sie die Servlet -Methode und erstellen Sie ein neues kommentiertes Servlet.
Sie müssen die Annotation von @ServletComponentscan in die Hauptmethode hinzufügen.
Ändern Sie den Standardzugriffspfad des Ueditors.
Hinweis: Unter Springboot werden alle Ressourcendateien unter Klassen platziert. Seien Sie vorsichtig beim Umgang mit Pfaden. Fügen Sie den Web-Inf/Klassen Pfade hinzu
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.