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

Some experience sharing on enabling HTTPS

As the domestic network environment continues to ...

After Apache is installed, the service cannot be started (error code 1 appears when starting the service)

Table of contents 1. Error message 2. Cause of er...

How to change the MySQL database directory location under Linux (CentOS) system

How to change the MySQL database directory locati...

Differences between Windows Server 2008R2, 2012, 2016, and 2019

Table of contents Common version introduction Com...

15 Best Practices for HTML Beginners

Here are 30 best practices for HTML beginners. 1....

JavaScript to achieve a simple carousel effect

What is a carousel? Carousel: In a module or wind...

Detailed explanation of the flexible use of CSS grid system in projects

Preface CSS grids are usually bundled in various ...

Simple implementation of handheld barrage function + text shaking special effects code based on JS

There was a shaking barrage on TikTok a while ago...

How to skip errors in mysql master-slave replication

1. Traditional binlog master-slave replication, s...

How to use mysql index merge

Index merging is an intelligent algorithm provide...

HTML CSS3 does not stretch the image display effect

1. Use the transform attribute to display the ima...

Solution to large line spacing (5 pixels more in IE)

Copy code The code is as follows: li {width:300px...

MySQL 8.0.26 installation and simplified tutorial (the most complete on the Internet)

Table of contents 1. Download MySQL 1.1 Download ...

How to turn a jar package into a docker container

How to turn a jar package into a docker container...

WeChat applet realizes multi-line text scrolling effect

This article example shares the specific code for...