（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. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  2. SQL Server bit数据类型

    bit值保存为1/0,1代表true,0代表false读取数据库数据时,可以直接用bool型读取该字段,会直接转换为true/false 数据库表结构 CREATE TABLE [dbo].[BitT ...

  3. [LeetCode] Climbing Sairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  4. 51nod 1799 二分答案(分块打表)

    首先题目等价于求出满足运行二分程序后最后r=k的排列种数. 显然对于这样的二分程序,起作用的只有mid点,mid处的值决定了接下来要递归的子区间. 于是可以一遍二分求出有多少个mid点处的值<= ...

  5. Day21-自定义分页

    一. 先简单来个示例 1.1 在urls.py中增加1条,user_list from django.conf.urls import url,include from django.contrib ...

  6. 【BZOJ2432】【NOI2011】兔农（数论，矩阵快速幂）

    [BZOJ2432][NOI2011]兔农(数论,矩阵快速幂) 题面 BZOJ 题解 这题\(75\)分就是送的,我什么都不想写. 先手玩一下,发现每次每次出现\(mod\ K=1\)的数之后 把它减 ...

  7. Hbase(一)基础知识

    一.Hbase数据库介绍 1.简介 HBase 是 BigTable 的开源 java 版本.是建立在 HDFS 之上,提供高可靠性.高性能.列存储. 可伸缩.实时读写 NoSQL 的数据库系统. N ...

  8. 【bzoj4036】按位或

    Portal --> bzoj4036 Solution  感觉容斥的东西内容有点qwq多啊qwq还是以题目的形式来慢慢补档好了  这里补的是min-max容斥 ​    其实min-max容斥 ...

  9. python函数的输入参数

    http://note.youdao.com/noteshare?id=c2a0a39ee3cae09a62dcbc9f96d04b56

  10. 「Python」7个不一样的代码写法

    打印index 对于一个列表,或者说一个序列我们经常需要打印它的index,一般传统的做法或者说比较low的写法: 更优雅的写法是多用enumerate 两个序列的循环 我们会经常对两个序列进行计算或 ...