（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. PreparedStatement的execute误解

    boolean execute()  throws SQLException在此 PreparedStatement 对象中执行 SQL 语句,该语句可以是任何种类的 SQL 语句.一些特别处理过的语 ...

  2. 关于command 'gcc' failed with exit status 1 解决方法

    Python踩坑之路 Setup script exited with error: command 'gcc' failed with exit status 1 由于没有正确安装Python开发环 ...

  3. Java进行Base64的编码(Encode)与解码(Decode)

    关于base64编码Encode和Decode编码的几种方式 Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便 ...

  4. jenkins配置slave节点 构建项目并执行操作

    1.新建与配置结点 [系统管理]-> [管理结点]-> [新建结点] 2.配置slave 说明: Name: 定义slave的唯一名称标识,可以是任意字符串,通常设置为slave主机名.i ...

  5. SQL中INNER JOIN、LEFT JOIN、RIGHT JOIN、FULL JOIN区别

    sql中的连接查询有inner join(内连接).left join(左连接).right join(右连接).full join(全连接)四种方式,它们之间其实并没有太大区别,仅仅是查询出来的结果 ...

  6. UVALive6434_Number Assignment

    简单dp题. 这样的,意思为给你n个数,要你现在将这n个数分为m组,使得所有组内最大值与最小值的差的和最小. 其实可以这样来考虑这个问题,首先可以把所有的数字从小到大排个序,显然如果有一种取法是最优的 ...

  7. BZOJ 2299 向量(裴蜀定理)

    题意:给你一对数a,b,你可以任意使用(a,b), (a,-b), (-a,b), (-a,-b), (b,a), (b,-a), (-b,a), (-b,-a)这些向量,问你能不能拼出另一个向量(x ...

  8. [洛谷P4563][JXOI2018]守卫

    题目大意:有一段$n(n\leqslant5\times10^3)$个点的折线,特殊点可以覆盖它以及它左边的它可以“看见”的点(“看见”指连线没有其他东西阻挡).定义$f_{l,r}$为区间$[l,r ...

  9. 【BZOJ2141】排队（树套树）

    [BZOJ2141]排队(树套树) 题面 BZOJ 洛谷 题解 傻逼题啊... 裸的树套树 树状数组套线段树,每次交换的时候,考虑一下前后的贡献,先删掉贡献,再重新算一遍就好了.. #include& ...

  10. Alpha 冲刺 —— 十分之二

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助前端界面的开发 搭建测试用服务器的环境 完成 ...