JavaScript using Ckeditor + Ckfinder file upload case detailed explanation

JavaScript using Ckeditor + Ckfinder file upload case detailed explanation

1. Preparation

Ckeditor_4.5.7_full + Ckfinder_java_2.6.0

2. Decompression

1. Unzip ckeditor, just like unzipping normal files.

和平常文件解壓相同，正常解壓即可

2. Unzip ckfinder. After unzipping, enter the ckfinder folder and find the CKFinderJava-2.6.0.war file. Continue to unzip it.

這里寫圖片描述

3. Pay attention to the red frame

這里寫圖片描述

3. Start Integration

1. After the preparation is completed, copy the ckeditor in Figure 1 and the ckfinder folder in Figure 3 to the WebContent of our own project. I created a new folder assets under WebContent.

這里寫圖片描述

2. Create a new jsp page

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Import ckeditor.js and ckfinder.js -->
<script type="text/javascript" src="${base }/assets/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>
<title>ckeditor</title>
</head>
<body>
    ${base }
    <p>
    <h1>${msg }</h1>
    <form>
      <textarea name="editor1" id="editor1" rows="10" cols="80">
          This is my textarea to be replaced with CKEditor.
      </textarea>
    </form>
    <!-- Use ckeditor to operate the textarea with id editor1-->
    <script type="text/javascript">
        var editor = CKEDITOR.replace( 'editor1' );
        CKFinder.setupCKEditor(editor, '${base }/assets/ckfinder/');
    </script>
</body>
</html>

At this point we can already see the rich text editor.

3. Enter the directory as shown in the figure, copy config.xml to WEB-INF of our own project, rename the file to ckfinder.xml, and import the jar package under lib.

這里寫圖片描述

4. Modify ckfinder.xml

這里寫圖片描述

Basedir is the physical path where the file is stored. When our project is running on our computer, we find the project running path and then the location where we want to save it. (If the expression is unclear, you can send a private message~)
5. Modify the config.js file under ckeditor

CKEDITOR.editorConfig = function( config ) {
    config.height = 300;
    config.enterMode = CKEDITOR.ENTER_BR; // remove <p>
    config.shiftEnterMode = CKEDITOR.ENTER_BR; // remove <p>
    config.toolbarCanCollapse = true; //Toolbar can be folded config.toolbarGroups = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'forms', groups: [ 'forms' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'insert', groups: [ 'insert' ] },
        '/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'colors', groups: [ 'colors' ] },

        { name: 'others', groups: [ 'others' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'about', groups: [ 'about' ] },
        { name: 'tools', groups: [ 'tools' ] }
    ];
    config.removeButtons = 'About,Flash,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,NewPage,Templates,Scayt,Language,Smiley,Iframe,Save,SelectAll,CreateDiv,BidiRtl,BidiLtr,ShowBlocks';
    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. Add the following code in web.xml

<servlet>
        <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
        <init-param>
            <description>
                Path to configuration file can be relative path inside application,
                absolute path on local file system or UNC path.
            </description>
            <param-name>XMLConfig</param-name>
            <param-value>/WEB-INF/ckfinder.xml</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ConnectorServlet</servlet-name>
        <url-pattern><!--This path can be used to find the ckfinder folder under the project-->
            /assets/ckfinder/core/connector/java/connector.java
        </url-pattern>
    </servlet-mapping>

7. Run and view the effect.

This is the end of this article about the detailed explanation of the case of using Ckeditor+Ckfinder to upload files in JavaScript. For more relevant content about using Ckeditor+Ckfinder to upload files in JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to manage large file uploads and breakpoint resume based on js
  • Node.js uses express-fileupload middleware to upload files
  • jQuery implements asynchronous file upload ajaxfileupload.js
  • Backend code example for large file upload based on JavaScript
  • JS can breakpoint resume file upload to achieve code analysis
  • FormData class in JS implements file upload
  • The FileReader class in JS implements the function of timely preview of file upload
  • js to implement file upload style details

<<:  When installing a virtual machine on Thinkpad VMware, the message "This host supports Intel VT-x, but Intel VT-x is disabled" appears (problem solution)

>>:  Detailed explanation of the problem of matching even when there is a space at the end of the string in the Mysql query condition

Recommend

Summary of H5 wake-up APP implementation methods and points for attention

Table of contents Preface Jump to APP method URL ...

Solution to MySQLSyntaxErrorException when connecting to MySQL using bitronix

Solution to MySQLSyntaxErrorException when connec...

Detailed Tutorial on Installing VirtualBox 6.0 on CentOS 8 / RHEL 8

VirtualBox is a free and open source virtualizati...

Detailed steps to start the Django project with nginx+uwsgi

When we develop a web project with Django, the te...

Avoiding Problems Caused by Closures in JavaScript

About let to avoid problems caused by closure Use...

Summary of common MySQL table design errors

Table of contents Mistake 1: Too many columns of ...

A brief discussion on JS regular RegExp object

Table of contents 1. RegExp object 2. Grammar 2.1...

Two simple menu navigation bar examples

Menu bar example 1: Copy code The code is as foll...

Vue uses Split to encapsulate the universal drag and slide partition panel component

Table of contents Preface start Basic layout Data...

Detailed explanation of how to use the vue verification code component

This article example shares the specific implemen...

js detects keywords in the title and description and replaces or jumps to other pages when found

Keywords General The title cannot contain words l...

How to prohibit vsftpd users from logging in through ssh

Preface vsftp is an easy-to-use and secure ftp se...

A brief discussion on the efficiency of MySQL subquery union and in

Recent product testing found a problem that when ...

Tomcat uses thread pool to handle remote concurrent requests

By understanding how tomcat handles concurrent re...

In-depth analysis of HTML semantics and its related front-end frameworks

About semantics Semantics is the study of the rel...