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

Vue+webrtc (Tencent Cloud) practice of implementing live broadcast function

Table of contents 1. Live broadcast effect 2. Ste...

Web Theory: Don't make me think Reading Notes

Chapter 1 <br />The most important principl...

Installation and deployment tutorial of the latest MySQL version 5.7.17 (64bit ZIP green version) under Win 8 or above

First of all, the blogger is playing the communit...

Zabbix implements monitoring of multiple mysql processes

Three MySQL instance processes are started on one...

Detailed steps for Spring Boot packaging and uploading to Docker repository

Important note: Before studying this article, you...

Vue+Openlayer uses modify to modify the complete code of the element

Vue+Openlayer uses modify to modify elements. The...

Detailed configuration of mysql8.x docker remote access

Table of contents Environmental conditions Errors...

A complete list of meta tag settings for mobile devices

Preface When I was studying the front end before,...

Tudou.com front-end overview

1. Division of labor and process <br />At T...

vue perfectly realizes el-table column width adaptation

Table of contents background Technical Solution S...

Detailed explanation of built-in methods of javascript array

Table of contents 1. Array.at() 2. Array.copyWith...

Vue3.0 implements the magnifying glass effect case study

The effect to be achieved is: fixed zoom in twice...

MySQL incremental backup and breakpoint recovery script example

Introduction Incremental backup means that after ...

Ubuntu MySQL 5.6 version removal/installation/encoding configuration file configuration

1. Remove MySQL a. sudo apt-get autoremove --purg...

CSS writing format, detailed explanation of the basic structure of a mobile page

1. CSS writing format 1. Inline styles You can wr...