ckeditor+ckfinder+java
(java)Ckdeitor+ckfinder整合
- 第一步:工具下载
首先下载: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的更多相关文章
- jsp中如何整合CKEditor+CKFinder实现文件上传
最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...
- .Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明
Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...
- 网络编辑器插件ckeditor+ckfinder配置
原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- (配置)CKEditor+CKFinder+php上传配置,根据年月命名创建文件夹来存放
CKEditor+CKFinder+php上传配置 新版本的CKEditor只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder.这里主要记录CKFinder上传的一些参数配置,能够成功上 ...
- CKEditor + CKFinder 实现编辑上传图片配置 (二)
CKEditor + CKFinder 实现编辑上传图片配置 (二) 上传图片时,如果上传的图片过大,默认情况情况下回自动裁剪,代码如图 \ckfinder\config.php 目录下的配置文件co ...
- CKEditor + CKFinder 实现编辑上传图片配置
下载最新版 ckfinder 本人下载的php版本 https://cksource.com/ckfinder/download 下载最新版ckeditor http://ckeditor.com/ ...
- CKEditor && CKFinder 配置
准备 ...
- Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)
先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下 ...
随机推荐
- py下载网络图片
很简单,做下记录 import urllib import os url = "图片路径" dir = "d:\\pyimgtest\\G0000001\\" ...
- AtCoder Regular Contest 083 C: Sugar Water
题意 给你一个空杯子,有4种操作: 操作1 加100a克的水 操作2 加100b克的水 操作3 加c克的糖 操作4 加d克的糖 糖的质量不能超过水的质量e/100 糖和水的总质量不能超过f 糖的质量不 ...
- java网络编程(二)可中断套接字
参考资料:java核心技术 卷II 为中断套接字操作,可使用java.nio包提供的SocketChannel类.可以使用如下方式打开SocketChannel: SocketChannel chan ...
- C++解析(22):父子间的冲突
0.目录 1.同名覆盖 2.赋值兼容 3.函数重写遇上赋值兼容 4.小结 1.同名覆盖 子类中是否可以定义父类中的同名成员?如果可以,如何区分?如果不可以,为什么? 父子间的冲突: 子类可以定义父类中 ...
- BZOJ3261:最大异或和——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3261 给定一个非负整数序列{a},初始长度为N. 有M个操作,有以下两种操作类型: 1.A x:添加 ...
- Closest Number in Sorted Array
Given a target number and an integer array A sorted in ascending order, find the index i in A such t ...
- BZOJ 1367 [Baltic2004]sequence 解题报告
BZOJ 1367 [Baltic2004]sequence Description 给定一个序列\(t_1,t_2,\dots,t_N\),求一个递增序列\(z_1<z_2<\dots& ...
- bzoj 1053
代码: //本题要求不超过n的因子最多的最小的数,我们知道因子的个数可以有素因子的指数得出,题目限制n是2e9,我们可以排除掉一些情况然后暴力 //对于一个数必然是因子越小他的因子数越多,所以枚举最小 ...
- Linux iptables:场景实战一
<Linux iptables:规则原理和基础>和<Linux iptables:规则组成>介绍了iptables的基础及iptables规则的组成,本篇通过实际操作进行ipt ...
- P值解释和误区
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...