JavaScript mit Ckeditor + Ckfinder - detaillierte Erläuterung zum Hochladen von Dateien
1. VorbereitungCkeditor_4.5.7_full + Ckfinder_java_2.6.0 2. Dekompression1. Entpacken Sie ckeditor, genau wie Sie normale Dateien entpacken.
2. Entpacken Sie ckfinder. Öffnen Sie nach dem Entpacken den Ordner ckfinder und suchen Sie die Datei CKFinderJava-2.6.0.war. Fahren Sie mit dem Entpacken fort.
3. Achten Sie auf den roten Rahmen
3. Integration starten1. Nachdem die Vorbereitung abgeschlossen ist, kopieren Sie den ckeditor in Abbildung 1 und den ckfinder-Ordner in Abbildung 3 in den WebContent unseres eigenen Projekts. Ich habe unter „WebContent“ einen neuen Ordner „Assets“ erstellt.
2. Erstellen Sie eine neue JSP-Seite
<%@ Seitensprache="java" Inhaltstyp="text/html; Zeichensatz=UTF-8"
Seitenkodierung="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
Zeichenfolgenpfad = request.getContextPath();
Zeichenfolge basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + Pfad;
%>
<c:set var="base" value="<%=basePath%>"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<!-- Importieren Sie ckeditor.js und ckfinder.js -->
<script type="text/javascript" src="${base }/assets/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>
<Titel>ckeditor</Titel>
</Kopf>
<Text>
${Basis}
<p>
<h1>${msg }</h1>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
Dies ist mein Textbereich, der durch CKEditor ersetzt werden soll.
</textarea>
</form>
<!-- Verwenden Sie ckeditor, um den Textbereich mit der ID editor1 zu bearbeiten-->
<Skripttyp="text/javascript">
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor(Editor, '${base }/assets/ckfinder/');
</Skript>
</body>
</html>An dieser Stelle können wir bereits den Rich-Text-Editor sehen. 3. Geben Sie das Verzeichnis wie in der Abbildung gezeigt ein, kopieren Sie config.xml in WEB-INF unseres eigenen Projekts, benennen Sie die Datei in ckfinder.xml um und importieren Sie das JAR-Paket unter lib.
4. Ändern Sie ckfinder.xml
Basedir ist der physische Pfad, in dem die Datei gespeichert ist. Wenn unser Projekt auf unserem Computer läuft, suchen wir den Projektlaufpfad und dann den Speicherort, an dem wir es speichern möchten. (Wenn der Ausdruck unklar ist, können Sie eine private Nachricht senden~)
CKEDITOR.editorConfig = Funktion(Konfiguration) {
Konfigurationshöhe = 300;
config.enterMode = CKEDITOR.ENTER_BR; // entfernen <p>
config.shiftEnterMode = CKEDITOR.ENTER_BR; // entfernen <p>
config.toolbarCanCollapse = true; //Symbolleiste kann eingeklappt werden config.toolbarGroups = [
{ Name: 'Dokument', Gruppen: [ 'Modus', 'Dokument', 'Doctools' ] },
{ Name: 'Zwischenablage', Gruppen: [ 'Zwischenablage', 'Rückgängig' ] },
{ Name: 'Formulare', Gruppen: [ 'Formulare' ] },
{ Name: 'Absatz', Gruppen: [ 'Liste', 'Einzug', 'Blöcke', 'Ausrichten', 'Bidi', 'Absatz' ] },
{ Name: 'Bearbeiten', Gruppen: [ 'Suchen', 'Auswahl', 'Rechtschreibprüfung', 'Bearbeiten' ] },
{ Name: 'Einfügen', Gruppen: [ 'Einfügen' ] },
'/',
{ Name: 'Stile', Gruppen: [ 'Stile' ] },
{ Name: 'basicstyles', Gruppen: [ 'basicstyles', 'Bereinigung' ] },
{ Name: 'Farben', Gruppen: [ 'Farben' ] },
{ Name: 'andere', Gruppen: [ 'andere' ] },
{ Name: 'Links', Gruppen: [ 'Links' ] },
{ Name: 'Über', Gruppen: [ 'Über' ] },
{ Name: 'Werkzeuge', Gruppen: [ 'Werkzeuge' ] }
];
config.removeButtons = 'Info, Flash, Formular, Kontrollkästchen, Radio, Textfeld, Textbereich, Auswählen, Schaltfläche, Bildschaltfläche, Ausgeblendetes Feld, Neue Seite, Vorlagen, Scayt, Sprache, Smiley, Iframe, Speichern, Alles auswählen, Div erstellen, BidiRtl, BidiLtr, Blöcke anzeigen';
var p='/Ckeditor/assets/';
config.filebrowserBrowseUrl =p+'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = p+'ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = p+'ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};6. Fügen Sie den folgenden Code in web.xml ein
<Servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-Klasse>com.ckfinder.connector.ConnectorServlet</servlet-Klasse>
<Init-Parameter>
<Beschreibung>
Der Pfad zur Konfigurationsdatei kann ein relativer Pfad innerhalb der Anwendung sein.
absoluter Pfad im lokalen Dateisystem oder UNC-Pfad.
</Beschreibung>
<param-name>XMLKonfiguration</param-name>
<param-value>/WEB-INF/ckfinder.xml</param-value>
</init-param>
<Init-Parameter>
<param-name>Debuggen</param-name>
<param-value>falsch</param-value>
</init-param>
<beim Start laden>1</beim Start laden>
</servlet>
<Servlet-Zuordnung>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern><!--Über diesen Pfad kann der Ordner ckfinder unter dem Projekt gefunden werden-->
/assets/ckfinder/core/connector/java/connector.java
</URL-Muster>
</servlet-mapping>7. Ausführen und die Wirkung beobachten. Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Verwendung von Ckeditor+Ckfinder zum Hochladen von Dateien in JavaScript. Weitere relevante Inhalte zur Verwendung von Ckeditor+Ckfinder zum Hochladen von Dateien in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten stehenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: So verpacken Sie das Uniapp-Projekt als Desktop-Anwendung
Artikel empfehlen
Detaillierte Erläuterung zur Verwendung von Docker zum Bereitstellen der Django + MySQL8-Entwicklungsumgebung
Ich habe das System vor einiger Zeit neu installi...
Docker-Netzwerkprinzipien und detaillierte Analyse benutzerdefinierter Netzwerke
Docker virtualisiert eine Brücke auf dem Host-Rec...
Detaillierte Erläuterung zum Abrufen, Zuweisen und Registrieren von Radiowerten in HTML
1. Radiogruppierung Solange der Name gleich ist, h...
URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben
Inhaltsverzeichnis Voraussetzungen Einrichten ein...
Zwei Implementierungen des Front-End-Routings von Vue-Router
Inhaltsverzeichnis Modusparameter HashHistorie Ha...
Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.
Inhaltsverzeichnis verifizieren: Kombiniert mit d...
So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten
Dieses Tutorial verwendet CentOS 7 64-Bit. Weisen...
10 Gründe, warum Linux immer beliebter wird
Linux wird von immer mehr Benutzern geliebt. Waru...
MySQL-Installations- und Konfigurationsmethoden und Vorsichtsmaßnahmen unter der Windows-Plattform
2.1, MSI-Installationspaket 2.1.1、Installation Be...
Zusammenfassung der praktischen Methoden von CSS3 (empfohlen)
1. Abgerundeter Rand: CSS- CodeInhalt in die Zwis...
Über den Fehler des Better-Scroll-Plug-Ins, der nicht gleiten kann (gelöst durch Plug-In im Jahr 2021)
Better-Scroll-Bildlaufprinzip Als übergeordneter ...
Docker implementiert hostübergreifende Containerkommunikation basierend auf MacVLAN
Suchen Sie zwei Testmaschinen: [root@docker1 cent...
Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort
Inhaltsverzeichnis 1. Standort / Matching 2. Stan...
Zwei Möglichkeiten zur Implementierung von Textstrichen in CSS3 (Zusammenfassung)
Frage Vor kurzem bin ich auf die Anforderung gest...
Vue3 verwendet Axios Interceptor zum Drucken von Front-End-Protokollen
Inhaltsverzeichnis 1. Einleitung 2. Verwenden Sie...