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 scaffolding learning project creation method

1. What is scaffolding? 1. Vue CLI Vue CLI is a c...

Detailed explanation of the properties and functions of Vuex

Table of contents What is Vuex? Five properties o...

How to implement remote automatic backup of MongoDB in Linux

Preface After reading the previous article about ...

Summary of commonly used SQL in MySQL operation tables

1. View the types of fields in the table describe...

How to use echarts to visualize components in Vue

echarts component official website address: https...

What are the advantages of using B+Tree as an index in MySQL?

Table of contents Why do databases need indexes? ...

Analysis of implicit bug in concurrent replication of MySQL 5.7

Preface Most of our MySQL online environments use...

How to display and format json data on html page

JSON data is displayed and formatted on the HTML ...

Ajax responseText parses json data case study

Solve the problem that the responseText returned ...

How to add website icon?

The first step is to prepare an icon making softwa...

Detailed example of using CSS to beautify HTML form controls (form beautification)

1. Basic syntax structure of HTML submit and bott...

Vue Element front-end application development preparation for the development environment

Table of contents Overview 1. Develop the require...

Bundling non-JavaScript static resources details

Table of contents 1. Custom import in packaging t...

Tutorial on installing and configuring remote login to MySQL under Ubuntu

This article shares the MySQL installation and co...

Detailed explanation of JavaScript data types

Table of contents 1. Literals 1.1 Numeric literal...