下载CKEditor压缩包,解压
(1)需要更改ckeditor下config.js中路径内容
// 上传文件时浏览服务文件夹
config.filebrowserBrowseUrl='/organization/CKEditor_Finder/ckfinder/ckfinder.htm';
// 上传图片时浏览服务文件夹
config.filebrowserImageBrowseUrl='/organization/CKEditor_Finder/ckfinder/ckfinder.htm?Type=Images';
// 上传Flash时浏览服务文件夹
config.filebrowserFlashBrowseUrl='/organization/CKEditor_Finder/ckfinder/ckfinder.htm?Type=Flash';
// 上传文件按钮(标签)
config.filebrowserUploadUrl='/organization/CKEditor_Finder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
// 上传图片按钮(标签)
config.filebrowserImageUploadUrl='/organization/CKEditor_Finder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
// 上传Flash按钮(标签)
config.filebrowserFlashUploadUrl='/organization/CKEditor_Finder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
(2)在web.xml添加CKEditor
<!-- CKFinder begin-->
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/CKEditor_Finder/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>
/CKEditor_Finder/ckfinder/core/connector/java/connector.java
</url-pattern>
</filter-mapping>
<session-config>
<session-timeout>10</session-timeout>
</session-config>
<!-- CKFinder end-->
(3)在maven的pom.xml下添加CKEditor所需要的包
<!-- 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>
<!-- CKFinderend -->
(4)WEB-INF下创建文件config.xml
<config>
<enabled>true</enabled>
<baseDir></baseDir>
<baseURL>/organization/CKEditor_Finder/userfiles/</baseURL>
<licenseKey></licenseKey>
<licenseName></licenseName>
<imgWidth>1600</imgWidth>
<imgHeight>1200</imgHeight>
<imgQuality>80</imgQuality>
<uriEncoding>UTF-8</uriEncoding>
<defaultResourceTypes></defaultResourceTypes>
<types>
<typename="Files">
<url>%BASE_URL%files/</url>
<directory>%BASE_DIR%files</directory>
<maxSize>0</maxSize>
<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip
</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<typename="Images">
<url>%BASE_URL%images/</url>
<directory>%BASE_DIR%images</directory>
<maxSize>0</maxSize>
<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<typename="Flash">
<url>%BASE_URL%flash/</url>
<directory>%BASE_DIR%flash</directory>
<maxSize>0</maxSize>
<allowedExtensions>swf,flv</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
<accessControls>
<accessControl>
<role>*</role>
<resourceType>*</resourceType>
<folder>/</folder>
<folderView>true</folderView>
<folderCreate>true</folderCreate>
<folderRename>true</folderRename>
<folderDelete>true</folderDelete>
<fileView>true</fileView>
<fileUpload>true</fileUpload>
<fileRename>true</fileRename>
<fileDelete>true</fileDelete>
</accessControl>
</accessControls>
<thumbs>
<enabled>true</enabled>
<url>%BASE_URL%_thumbs/</url>
<directory>%BASE_DIR%_thumbs</directory>
<directAccess>false</directAccess>
<maxHeight>100</maxHeight>
<maxWidth>100</maxWidth>
<quality>80</quality>
</thumbs>
<checkDoubleExtension>true</checkDoubleExtension>
<checkSizeAfterScaling>true</checkSizeAfterScaling>
<secureImageUploads>true</secureImageUploads>
<htmlExtensions>html,htm,xml,js</htmlExtensions>
<forceASCII>false</forceASCII>
<enableCsrfProtection>true</enableCsrfProtection>
<hideFolders>
<folder>.*</folder>
<folder>CVS</folder>
</hideFolders>
<hideFiles>
<file>.*</file>
</hideFiles>
<plugins>
<plugin>
<name>imageresize</name>
<class>com.ckfinder.connector.plugins.ImageResize</class>
<params>
<paramname="smallThumb"value="90x90"></param>
<paramname="mediumThumb"value="120x120"></param>
<paramname="largeThumb"value="180x180"></param>
</params>
</plugin>
<plugin>
<name>fileeditor</name>
<class>com.ckfinder.connector.plugins.FileEditor</class>
<params></params>
</plugin>
</plugins>
<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>
(5)做好上面的准备工作后在jsp中引入js文件
<scripttype="text/javascript"src="<c:urlvalue="/CKEditor_Finder/ckeditor/ckeditor.js"/>"></script>
<scripttype="text/javascript"src="<c:urlvalue="/CKEditor_Finder/ckfinder/ckfinder.js"/>"></script>
(6)在对应的textarea下添加
<textareaname="content"id="add_new_content"style="width:800px;height:400px;"></textarea>
<script type="text/javascript">
CKEDITOR.replace('add_new_content');
</script>
(7)在“打开”编辑新闻管理窗口中添加
function editnews(index){
CKEDITOR.instances.edit_new_content.setData(row.text);//row.text为编辑器中内容,自定传入的值
(8)编辑新闻管理中保存数据时对textarea下数据的获取
$('#edit_new_button').bind("click",function(){
var validata=$("#edit_new_form").form("validate");
varcontent= CKEDITOR.instances.edit_new_content.getData();
if(validata){
$.ajax({
type:"POST",
url:'../information/editNewData.html',
data:{"id":$("#edit_new_id").val(),"content":content,"title":$("#eidt_new_title").val()},
success:function(result){
(9)打开创建新闻时需要清空下textarea
$("#create_new_button").bind("click",function(){
$('#add_new_dialog').dialog('open').dialog('setTitle','创建新闻');
$("#add_new_title").val("");
CKEDITOR.instances.add_new_content.setData("");
});
(10)content在数据库中对应的类型为BLOB
content在Information.java实体类中定义的类型为byte[]
package com.apabi.organization.model;
import java.io.Serializable;
import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.List;
import javax.persistence.*;
/** 系统管理*/
@Entity
@Table(name = "INFORMATION")
public class Information implements Serializable{
private static final long serialVersionUID = 984272591543594665L;
//唯一标识
private Longid;
// private Long userId;
private OrgUseruserId;
//标题
private Stringtitle;
//信息类型1-新闻,2-公告,3-广告
private Longtype;
//内容
privatebyte[]content;
private Stringtext;//为了获取字符串类型的content
//创建时间
private DatecreateTime = new Date();
public Information() { }
@Id
@SequenceGenerator(name="sequenceInformation",sequenceName="SEQ_INFORMATION")
@GeneratedValue(generator="sequenceInformation",strategy=GenerationType.SEQUENCE)
@Column(name="ID", unique =true, nullable = false, precision = 10, scale = 0)
public Long getId() {
return this.id;
}
public void setId(Long id) {
this.id = id;
}
@OneToOne(cascade = CascadeType.ALL) //一个用户user_id对应OrgUser中的id
@JoinColumn(name="user_id",referencedColumnName="id")
public OrgUser getUserId() {
returnuserId;
}
public void setUserId(OrgUser userId) {
this.userId = userId;
}
@Column(name = "TITLE", length = 300)
public String getTitle() {
return this.title;
}
public void setTitle(String title) {
this.title = title;
}
@Column(name = "TYPE", precision = 1, scale = 0)
public Long getType() {
return this.type;
}
public void setType(Long type) {
this.type = type;
}
@Column(name = "CONTENT")
public byte[] getContent() {
return this.content;
}
public void setContent(byte[] content) {
this.content = content;
}
@Temporal(TemporalType.DATE)
@Column(name = "CREATE_TIME", length = 7)
public Date getCreateTime() {
return this.createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
@Transient
public String getText() {
try {
return new String(content,"UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
returntext;
}
public void setText(String text) {//数据库content内容为空时的处理
if(content !=null){
this.text =new String(content);
}
this.text =null;
}
}
(11)在java文件中提取图片路径绑定
//内容source匹配元素element和属性attr 返回图片
public static Map match(String source, String element, String attr) {
if(null != source){
Map result = new LinkedHashMap();
String reg = "<" + element +"[^<>]*?\\s"+ attr+ "=['\"]?(.*?)['\"]?\\s.*?>";
Matcher m = Pattern.compile(reg).matcher(source);
while (m.find()) {
String key = m.group(0);
String value = m.group(1);
result.put(key, value);
}
Map imgMap = new HashMap();
Set<Map.Entry> set =result.entrySet();
for (Iterator<Map.Entry> it =set.iterator(); it.hasNext();) {
Map.Entry entry =(Map.Entry) it.next();
imgMap.put(entry.getValue(),"");
}
return imgMap;
}
return null;
}
//返回内容
public static String matchContent(String source, String element,String attr) {
if(null != source){
String reg = "<" + element +"[^<>]*?\\s"+ attr+ "=['\"]?(.*?)['\"]?\\s.*?>";
Matcher m = Pattern.compile(reg).matcher(source);
while (m.find()) {
String key = m.group(0);
source =source.replace(key,"");
}
}
return source;
}
//图片
Map imgMap = match(str,"img","src");
modelAndView.addObject("imgmap",imgMap);
//内容
String informationContent = matchContent(str,"img","src");modelAndView.addObject("informationContent", informationContent);
(12)jsp中显示图片
图片
<c:forEachitems="${imgmap}" var="img"varStatus="status">
<imgsrc=" ${img.key}"/>
</c:forEach>
内容 ${informationContent}