JavaScript mit Ckeditor + Ckfinder - detaillierte Erläuterung zum Hochladen von Dateien

JavaScript mit Ckeditor + Ckfinder - detaillierte Erläuterung zum Hochladen von Dateien

1. Vorbereitung

Ckeditor_4.5.7_full + Ckfinder_java_2.6.0

2. Dekompression

1. 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 starten

1. 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~)
5. Ändern Sie die Datei config.js unter ckeditor

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 verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js
  • Node.js verwendet die Express-Fileupload-Middleware zum Hochladen von Dateien
  • jQuery implementiert asynchronen Dateiupload ajaxfileupload.js
  • Backend-Codebeispiel für den Upload großer Dateien basierend auf JavaScript
  • JS kann den Datei-Upload mit Unterbrechungspunkten fortsetzen, um eine Code-Analyse zu erreichen
  • Die FormData-Klasse in JS implementiert den Dateiupload
  • Die FileReader-Klasse in JS implementiert die Funktion der zeitnahen Vorschau des Datei-Uploads
  • js zum Implementieren von Details im Datei-Upload-Stil

<<:  So verpacken Sie das Uniapp-Projekt als Desktop-Anwendung

>>:  Bei der Installation einer virtuellen Maschine auf Thinkpad VMware erscheint die Meldung „Dieser Host unterstützt Intel VT-x, aber Intel VT-x ist deaktiviert“ (Problemlösung)

Artikel empfehlen

Anwendung von CSS3-Animationseffekten in Aktivitätsseiten

Hintergrund Ehe wir uns versehen, neigt sich ein ...

MySQL-Praxiskenntnisse: Analyse von Methoden zum Vergleichen, ob zwei Tabellen unterschiedliche Daten haben

Dieser Artikel beschreibt anhand eines Beispiels,...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.6.22

In diesem Tutorial wird der spezifische Code der ...

Detaillierte Erläuterung der Verwendung von MySQL sql_mode

Inhaltsverzeichnis Vorwort sql_mode erklärt Die w...

Ubuntu-Grundeinstellungen: Installation und Nutzung des OpenSSH-Servers

Protokollieren Sie die Installation und Verwendun...

Zusammenfassung von 28 gängigen JavaScript-String-Methoden und Verwendungstipps

Inhaltsverzeichnis Vorwort 1. Ermitteln Sie die L...

Detaillierte Erklärung, wie man einen Docker-Container verlässt, ohne ihn zu schließen

Wenn Sie den Docker-Container nach dem Betreten d...

Keepalived implementiert Nginx-Lastausgleich und Beispielcode für hohe Verfügbarkeit

Kapitel 1: Einführung in Keepalived Der Zweck des...

4 flexible SCSS-Kompilierungsausgabestile

Vielen Leuten wird das Kompilieren erklärt, sobal...

Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3

Details zur Sicherheitsanfälligkeit VSFTP ist ein...

Befehlscodebeispiele für die Installation und Konfiguration von Docker

Docker-Installation Installieren von Abhängigkeit...

So verwenden Sie & und nohup im Hintergrund von Linux

Wenn wir in einem Terminal oder einer Konsole arb...

Zusammenfassung der Wissenspunkte zu Null in der MySQL-Datenbank

In der MySQL-Datenbank ist Null eine häufige Situ...

So installieren Sie MySQL 5.7 aus dem Quellcode in einer CentOS 7-Umgebung

Dieser Artikel beschreibt, wie MySQL 5.7 aus dem ...

jQuery manipuliert Cookies

Code kopieren Der Code lautet wie folgt: jQuery.c...