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 verschiedener Speichermethoden von Docker-Containern
Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...
Reines CSS zum Ändern der Farbe des Bildes
Die CSS-Technik zum Ändern der Farbe eines Bildes...
So zeigen Sie Linux-SSH-Dienstinformationen und den Ausführungsstatus an
Es gibt viele Artikel zur SSH-Serverkonfiguration...
Lösung für das Problem, dass Nacos keine Verbindung zu MySQL herstellen kann
Grund Die MySQL-Version, von der Nacos‘ POM abhän...
Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen
1. Sehen Sie sich die Feldtypen in der Tabelle an...
Eine kurze Analyse der Prinzipien von NFS-Servern und der Schritte zum Erstellen, Konfigurieren und Bereitstellen dieser
Inhaltsverzeichnis Einführung in den NFS-Dienst W...
Eine kurze Analyse verschiedener Möglichkeiten zum Konfigurieren statischer IP-Adressen in RHEL8
Beim Arbeiten an einem Linux-Server ist das Zuwei...
Lösung für Fehler 1290 beim Importieren von Dateidaten in MySQL
Fehlerszenario Verwenden Sie den MySQL-Befehl in ...
Das WeChat-Applet implementiert einen einfachen Chatroom
In diesem Artikel wird der spezifische Code des W...
Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung
In diesem Artikelbeispiel wird der spezifische Co...
Detailliertes Tutorial zur Springcloud-Alibaba-Nacos-Linux-Konfiguration
Laden Sie zuerst das komprimierte Nacos-Paket von...
Detaillierte Einführung in Protokolle im Linux-System
Inhaltsverzeichnis 1. Logbezogene Dienste 2. Geme...
Zusammenfassung der Linux-Befehlsmethoden zum Anzeigen verwendeter Befehle
Im System werden viele Befehle verwendet. Wie kön...
So erstellen Sie dynamische QML-Objekte in JavaScript
1. Objekte dynamisch erstellen Es gibt zwei Mögli...
Installieren Sie Memcached und die PHP Memcached-Erweiterung unter CentOS
In Bezug auf das leistungsstarke verteilte Speich...