（java）Ckdeitor+ckfinder整合

  1. 第一步：工具下载

首先下载：CKEditor

地址：http://cdeditor.com/dowmload

接着下载CKFinder

地址：http://cksource.com/ckfinder/download

第二步：新建项目(ckeditor)

第三步：整合

解压ckeditor压缩包，然后将ckeditor文件夹全部考到WebRoot跟目录下。完成后项目结构如下图：

修改ckeditor文件夹下的config.js文件,代码如下

CKEDITOR.editorConfig = function( config ) {

// Define changes to default configuration here.

// For the complete reference:

// http://docs.ckeditor.com/#!/api/CKEDITOR.config

// The toolbar groups arrangement, optimized for two toolbar rows.

config.toolbarGroups = [

{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },

{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },

{ name: 'links' },

{ name: 'insert' },

{ name: 'forms' },

{ name: 'tools' },

{ name: 'document',          groups: [ 'mode', 'document', 'doctools' ] },

{ name: 'others' },

'/',

{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },

{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },

{ name: 'styles' },

{ name: 'colors' },

{ name: 'about' }

];

// Remove some buttons, provided by the standard plugins, which we don't

// need to have in the Standard(s) toolbar.

config.removeButtons = 'Underline,Subscript,Superscript';

// Se the most common block elements.

config.format_tags = 'p;h1;h2;h3;pre';

// Make dialogs simpler.

config.removeDialogTabs = 'image:advanced;link:advanced';

config.uiColor = '#F7F8F9';

//我测试有这句会报错。Falseconfig找不到

//config.scayt_autoStartup = falseconfig.language = 'zh-cn';

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';

config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

(这个是c#的配置方法)

//config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

//     config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

//     config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

//     config.filebrowserUploadUrl = //'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

//     config.filebrowserImageUploadUrl = //'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';

//     config.filebrowserFlashUploadUrl = //'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

};

接着解压：ckfinder_java_2.4.zip,将ckfinder_java_2.4/ckfinder下的CKFinderJava-2.4.war(如果不能打开，可直接修改后缀名为.zip)再次解压，找到CKFinderJava下的ckfinder文件夹，将其拷贝到WebRoot跟目录下。

接下来 整合所需要的jar包，到刚才解压的war包，(CKFinderJava-2.4.war)下找，位置如下：

CKFinderJava-2.4\WEB-INF\lib  所需jar包(拷贝到WEB-INFd的lib目录下)

接着把配置文件：config.xml、web.xml也拷贝到WebRoot/WEB-INF下(如果以前是web项目只需把web.xml文件的内容拷贝到以前的web.xml中即可)，配置文件同样到刚才解压的war包下找，

打开config.xml

第15行的<enabled>true</enabled>改为<enabled>true</enabled>

第21行的<baseURL>/CKFinderJava/userfiles/</baseURL>改为<baseURL>/ckeditor/userfiles/</baseURL>

注：此处的ckeditor是根据你的项目名定的

在WebRoot下新建index.jsp，<head></head>里面加入

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

System.out.println(path);

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

<script type="text/javascript" src="<%=path%>/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="<%=path%>/ckfinder/ckfinder.js"></script>

<script type="text/javascript" language="javascript">

window.onload = function()

{       CKDEITOR.replace("txtContents");

//  var editor = CKDEITOR.replace( 'txtContents');

//  CKFinder.setupCKEditor(editor,'ckfinder/');

};

</script>

</head>

<body>

<textarea id="txtContents" name="txtContents" class="ckeditor" row="10" cols="80"></textarea>

</body>

</html>

ckeditor+ckfinder+java的更多相关文章

  1. jsp中如何整合CKEditor+CKFinder实现文件上传

    最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...

  2. .Net在线编辑器：KindEditor及CkEditor+CkFinder配置说明

    Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...

  3. 网络编辑器插件ckeditor+ckfinder配置

    原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...

  4. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  5. （配置）CKEditor+CKFinder+php上传配置，根据年月命名创建文件夹来存放

    CKEditor+CKFinder+php上传配置 新版本的CKEditor只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder.这里主要记录CKFinder上传的一些参数配置,能够成功上 ...

  6. CKEditor + CKFinder 实现编辑上传图片配置 （二）

    CKEditor + CKFinder 实现编辑上传图片配置 (二) 上传图片时,如果上传的图片过大,默认情况情况下回自动裁剪,代码如图 \ckfinder\config.php 目录下的配置文件co ...

  7. CKEditor + CKFinder 实现编辑上传图片配置

    下载最新版 ckfinder 本人下载的php版本 https://cksource.com/ckfinder/download 下载最新版ckeditor http://ckeditor.com/ ...

  8. CKEditor && CKFinder 配置

    准备                                                                                                   ...

  9. Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)

    先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下 ...

随机推荐

  1. Java中TimeZone类的常用方法

    一.TimeZone类的定义 TimeZone类是一个抽象类,主要包含了对于时区的各种操作,可以进行计算时间偏移量或夏令时等操作 二.TimeZone类的常用方法 1.getAvailableIDs( ...

  2. Spring异步事件

    1.发布事件 @Data public class CustomEvent extends ApplicationEvent implements Serializable { private Boo ...

  3. 第74天：jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. ios基础动画、关键帧动画、动画组、转场动画等

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  5. (转)Spring用代码来读取properties文件

    转至http://www.cnblogs.com/Gyoung/p/5507063.html 我们都知道,Spring可以@Value的方式读取properties中的值,只需要在配置文件中配置org ...

  6. Git config配置

    git获取帮助git help config git config --help man git-config   git config --global user.name "fuleyi ...

  7. restful风格请求及都是 / 的请求及参数也在请求的/中

    前台请求的样式: http://localhost:8080/item/88909 其中参数就是最后的 商品id号  88909 后台Controller中取出参数的方法: @Controller p ...

  8. Spring MVC @CookieValue注解

    @CookieValue的作用 用来获取Cookie中的值 @CookieValue参数 1.value:参数名称 2.required:是否必须 3.defaultValue:默认值 @Cookie ...

  9. bzoj3205 [Apio2013]机器人

    3205: [Apio2013]机器人 Time Limit: 15 Sec  Memory Limit: 128 MBSubmit: 953  Solved: 227[Submit][Status] ...

  10. git 还原某个文件到特定版本

    1.先使用 git log 查看需要还原的版本号 2.git checkout <版本号> <文件相对路径> 3.git commit -m "xxx"