CKEditor与CKFinder整合 jsp页面

第一次刚接触富文本编辑器时用的就是CKEditor的一个很老的版本 后来接触了百度的UEditor 使用了一段时间 再后来使用了wangEditor（使用起来很简单） 这段时间看别人源码的时候发现了ckfinder从昨天开始 在网上找文章 对比了5 6 篇文章每次都是卡在了 CKFinder查看文件出错 今天又看了一下网上相关的资料解决了这个问题 先看一下效果图

准备工作：

1.下载ckeditor和ckfinder

ckeditor

http://ckeditor.com/download

ckfinder

https://cksource.com/ckfinder/download

2.创建项目

3.1将下载解压后ckeditor引入项目

3.2将下载解压后ckfinder引入项目

不建议重命名ckeditor和ckfinder文件夹，可以将ckeditor的samples目录和CHANGES.md，README.md，和LICENSE.md删掉，将ckfinder的_samples目录，changelog.txt，install.txt和license.txt删掉。

4.2引入ckeditor js文件

<script type="text/javascript" src="${ctxp}ckeditor/ckeditor.js"></script>

4.2.1创建一个textarea

	<form>
		<!-- 一个textarea -->
		<textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
        </textarea>
	</form>

4.2.2通过ckeditor来操作textarea

	<script type="text/javascript">
		CKEDITOR.replace('editor1');
	</script>

4.1引入ckfinder js文件

<script type="text/javascript" src="${ctxp }ckfinder/ckfinder.js"></script>

4.1.2通过ckeditor来操作editor

<span style="font-family:SimHei;font-size:14px;"><script type="text/javascript">
		var editor = CKEDITOR.replace('editor1');
		CKFinder.setupCKEditor(editor, '${ctxp }ckfinder/');
	</script></span>

jsp完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<!-- 引入ckeditor.js和ckfinder.js -->
<script type="text/javascript" src="${ctxp}ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${ctxp }ckfinder/ckfinder.js"></script>

<title>ckeditor</title>
</head>
<body>
	<form>
		<!-- 一个textarea -->
		<textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
        </textarea>
	</form>
	<!-- 将id为editor1的textarea用ckeditor来操作 -->
	<script type="text/javascript">
		var editor = CKEDITOR.replace('editor1');
		CKFinder.setupCKEditor(editor, '${ctxp }ckfinder/');
	</script>
</body>
</html>

将CKEditor与CKFinder整合

将config.xml拷入项目WEB-INF下将名字修改为ckfinder.xml在web.xml最后面加上如下的配置

	<!-- =================ckeditor+ckfinder图片上传功能的配置=================== -->
	<!-- ckfinder -->
	<servlet>
		<servlet-name>ConnectorServlet</servlet-name>
		<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
		<init-param>
			<description>
                Path to configuration file can be relative path inside application,
                absolute path on local file system or UNC path.
            </description>
			<param-name>XMLConfig</param-name>
			<param-value>/WEB-INF/ckfinder.xml</param-value>
		</init-param>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>ConnectorServlet</servlet-name>
		<url-pattern>
            /static/plugins/ckfinder/core/connector/java/connector.java
        </url-pattern>
	</servlet-mapping>
	<filter>
		<filter-name>FileUploadFilter</filter-name>
		<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
		<init-param>
			<param-name>sessionCookieName</param-name>
			<param-value>JSESSIONID</param-value>
		</init-param>
		<init-param>
			<param-name>sessionParameterName</param-name>
			<param-value>jsessionid</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>FileUploadFilter</filter-name>
		<url-pattern>
			 /static/plugins/ckfinder/core/connector/java/connector.java
     	 </url-pattern>
	</filter-mapping>

注意对应关系

将需要的jar包导入项目 这里使用maven

		<!-- ckeditor -->
		<dependency>
			<groupId>com.ckeditor</groupId>
			<artifactId>ckeditor-java-core</artifactId>
			<version>3.5.3</version>
		</dependency>
		<!-- CKFinder begin -->
		<dependency>
			<groupId>net.coobird</groupId>
			<artifactId>thumbnailator</artifactId>
			<version>0.4.2</version>
		</dependency>
		<dependency>
			<groupId>com.ckfinder</groupId>
			<artifactId>apache-ant-zip</artifactId>
			<version>2.3</version>
		</dependency>
		<dependency>
			<groupId>com.ckfinder</groupId>
			<artifactId>ckfinder</artifactId>
			<version>2.3</version>
		</dependency>
		<dependency>
			<groupId>com.ckfinder</groupId>
			<artifactId>ckfinderplugin-fileeditor</artifactId>
			<version>2.3</version>
		</dependency>
		<dependency>
			<groupId>com.ckfinder</groupId>
			<artifactId>ckfinderplugin-imageresize</artifactId>
			<version>2.3</version>
		</dependency>
		<!-- CKFinder end -->

注意事项

ckfinder.xml

将config标签下的第一个子标签enabled设置为true

<enabled>true</enabled>

默认配置如下将文件存放路径可以将其改为我们的地址

<baseURL>/userfiles/</baseURL>

完成操作 运行效果图

时间： 2024-08-29 15:42:06

CKEditor与CKFinder整合 jsp页面的相关文章

ckeditor和ckfinder整合

一.下载必须的jar包 1.ckeditor_3.6.2.zip 2.ckeditor-java-3.6.2.war 3.ckfinder_java_2.1.zip 二.myeclipse引入jar包 位置: 插入java代码到src目录 引入js文件到WEB-ROOT 导入config.xml文件到WEB-INFO文件下 修改 config.xml 1.<enabled>false</enabled> 当前限制上传功能 2.<baseURL>/Elec/userfil

Java web 项目中使用ckeditor和ckfinder

重点汇总: 加入相关的jar包 在web.xml文件加入ckfinder 请求拦截器 配置ckfinder的配置文件:config.xml 杂谈 作为一个可视化的HTML 编辑器,最重要的一点是对于文件.图片和视频的管理,一个好的可视化的HTML 编辑器应该有很好的设计. 其他的话就不多说了,现在开始进入正题. ckeditor和ckfinder 两个到底是干什么的?为什么要做两个? ckeditor就是一个可视化的HTML编辑器,但是他的上传图片和视频却交给了另外的软件:ckfinder,为什

SpringBoot2 整合 JSP视图模板 整合 Ueditor富文本编辑器

一般涉及到后台管理系统,就少不了富文本编辑器,这个可以图文视频混排高级工具,笔者通过对比,发现目前市场上最好的三方库还当属百度的 ueditor 近年来 SpringBoot 框架可谓越来越火,可是笔者发现 ueditor 只提供了对于 JSP 的版本,网上能找到很多继承的案列,但是大部分都是修改源码,或者 自己去实现上传文件的接口这使得一些功能不能被使用或者需要花大量的事件去实现上传文件的方法,通过权衡,还是 springboot + jsp + ueditor 的方式最简单 虽然 jsp 不

在JSP里使用CKEditor和CKFinder

在JSP里使用CKEditor和CKFinder 最近在做一个新闻发布平台,放弃了很早的FCKEditor,使用CKEditor和CKFinder,尽管免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个.按照官网的document一步一步配置,虽然并不难,但是有些东西特别分散,还是全英文的,所以我就整理了一下安装过程和配置,以及需要注意的一些问题.希望对大家有所帮助. 目录 1. 下载CKEditor相关的安装文件 2. 安装CKEditor和C

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

先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下载,我使用的安装包是ckfinder_java_2.3.zip和ckeditor_3.6.3.zip,这两个文件可以分别到http://ckfinder.com/download和http://ckeditor.com/download下载,注意我使用的开发语言是java,所以下载cfinder的时候需要选择

ckeditor与ckfinder简单整合使用

Ckeditor与ckfinder简单整合使用 功能:主要用来发送图文的email,图片上传到本地服务器,但是email的图片地址要写上该服务器的远程地址(图片地址:例如:http://www.baidu.com/logo/1.png[s1] ) 注意版本:ckeditor4.0和ckfinder2.4 阅读技巧:红色为要解释的目标,蓝色为要解释的内容 其他什么修改文件存放路径啊,语言什么的网上都有,这只是展示了简单的整合.   1. 创建页面并编写HTML <textarea cols="

thinkphp ckeditor与ckfinder

thinkphp ckeditor与ckfinder 下载 ckeditor下载地址 ckfinder下载地址 整合 将ckeditor与findeditor下载完成后,放到public目录下,配置ckeditor,下载的时候有demo,可以在线配置的/ckeditor/samples/index.html. 将ckfinder的config.php中 authentication验证打开,改成return true; 在页面中使用: <textarea id="content"

CKEDITOR 和CKFINDER 最近项目要做文章管理，用的这2个

转自http://www.cnblogs.com/yuepeng/archive/2013/04/01/2992097.html 最近项目要做文章管理,用的这2个 ,看了上面的帖子.  修改了部分内容,我用的是ckeditor_4.4.7_standard 和ckfinder_java_2.4.2版本 1. 下载CKEditor相关的安装文件 CKEditor: 在 http://ckeditor.com/download 页面左侧,可以下载到各种版本的CKEditor,包括完整版full.标准

ckeditor添加自定义按钮整合swfupload实现批量上传图片

ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinder是收费的,所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能首先下载并安装ckeditor.下载swfupload解压拷贝到对应的文件目录下3.自定义工具栏按钮:我们可以自定义ckeditor工具栏要显示的按钮,工具栏按钮定义可以参考这里.现在我们需要向工具栏添加一个自定义功能