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 Erklärung des Javascript Echarts Luftqualitätskarteneffekts
Wir müssen zunächst die Luftqualitätsdaten mit de...
Detaillierte Schritte zur Installation von mysql5.7.18 auf dem Mac
1. Werkzeuge Wir benötigen jetzt zwei Tools: MySQ...
Zusammenfassung der Vue3-Slot-Nutzung
Inhaltsverzeichnis 1. Einführung in den V-Slot 2....
Die automatische Inkrementierung der Primärschlüssel-ID von MySQL wird auf diese Weise nicht verarbeitet
Die automatische Inkrementierung der Primärschlüs...
CSS3 erzielt einen coolen 3D-Rotationsperspektiveneffekt
CSS3 erreicht coole 3D-Rotationsperspektive 3D-An...
Grundlegende Referenztypen der erweiterten JavaScript-Programmierung
Inhaltsverzeichnis 1. Datum 2. RegExp 3. Original...
Detaillierte Erklärung der Set-Datenstruktur von JavaScript
Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...
Kreisförmiger Fortschrittsbalken mit CSS implementiert
Ergebnisse erzielen Implementierungscode html <...
Detaillierte Erklärung der Verwendung und des Unterschieds zwischen relativ und absolut in HTML
Der Unterschied zwischen relativ und absolut in H...
Nginx-Stream-Konfigurationsproxy (Nginx TCP/UDP-Lastausgleich)
Auftakt Wir alle wissen, dass nginx ein hervorrag...
Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt
Heute geht es noch immer um das Design von Watch-...
Tutorial zur Installation von MySQL 5.6 mit RPM in CentOS
Alle vorherigen Projekte wurden in der Windows-Sy...
Einige Probleme, die bei der Installation von MySQL auftreten können
Frage 1: Wenn Sie während der Installation „net s...
Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion
In diesem Artikel wird der spezifische Code für d...
Detaillierte Erklärung der JS-Array-Methoden
Inhaltsverzeichnis 1. Das ursprüngliche Array wir...