JavaScript 使用Ckeditor+Ckfinder文件上传案例详解

目录

• 一、准备工作
• 二、解压
• 三、开始集成

一、准备工作

Ckeditor_4.5.7_full + Ckfinder_java_2.6.0

二、解压

1.解压ckeditor，和平常文件解压相同，正常解压即可

2.解压ckfinder，解压完成后进入ckfinder文件夹下，发现有CKFinderJava-2.6.0.war文件，继续解压。

3.注意看红框部分

三、开始集成

1.准备工作完成，将图1中的ckeditor，及图3中的ckfinder文件夹拷贝到我们自己的项目的WebContent下。我在WebContent下新建了文件夹assets。

2.新建jsp页面

<%@ 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;
%>












    ${base }
    

    
${msg }
    

                This is my textarea to be replaced with CKEditor.
      
    
    
    

此时我们已经可以看到富文本编辑器。

3.进入如图所示目录下，将config.xml复制到我们自己项目的WEB-INF下，我将文件更名为ckfinder.xml，并将lib下的jar包导入。

4.修改ckfinder.xml

basedir 为文件存储的物理路径，就是我们项目在自己的电脑上运行时，找到项目运行路径，然后自己想要保存的位置。（表述不清楚可以私信~）
5.修改ckeditor下的config.js文件

CKEDITOR.editorConfig = function( config ) {
    config.height = 300;
    config.enterMode = CKEDITOR.ENTER_BR;// 去掉

    config.shiftEnterMode = CKEDITOR.ENTER_BR;// 去掉

    config.toolbarCanCollapse = true; //工具栏可折叠  
    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.在web.xml中添加如下代码

        ConnectorServlet
        com.ckfinder.connector.ConnectorServlet
        
            
                Path to configuration file can be relative path inside application,
                absolute path on local file system or UNC path.
            
            XMLConfig
            /WEB-INF/ckfinder.xml
        
        
            debug
            false
        
        1
    
    
        ConnectorServlet
        
            /assets/ckfinder/core/connector/java/connector.java
        
    

7.运行查看效果。

到此这篇关于JavaScript 使用Ckeditor+Ckfinder文件上传案例详解的文章就介绍到这了,更多相关JavaScript 使用Ckeditor+Ckfinder文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！