下面是一个关于FCKeditor的例子,望各位多提宝贵意见,谢谢
注:对于这个例子我只剪切了部分的主要的代码,并且这个工程是基于SWF之上的一个应用实例,以前有一种做法就是直接在IFRAME调用FCKeditor页面即可,但有些强大的功能就会受限,比如:上传的轷片存不到服务器端等等。所以现在换了另一种方式来解决这个问题
对于FCKeditor的JS和页面我就不贴出来了,只贴一些相关配置,并添上附件供参考,谢谢!
web.xml
--------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<!-- FCKeditor configuration begin -->
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</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>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
<!-- FCKeditor configuration end -->
</web-app>
********************************************
CateNewsEditAction.java
---------------------------------------------
package com.ihomey.aca.action.manage.food;
import java.io.File;
import java.util.Date;
import org.coreframework.annotation.Param;
import org.coreframework.web.upload.DefaultFileSaver;
import org.coreframework.web.upload.FileSave;
import org.coreframework.web.upload.FileUpload;
import org.coreframework.web.upload.UploadUtils;
import org.coreframework.web.upload.Uploader;
import org.coreframework.webflow.ActionUtils;
import org.coreframework.webflow.Form;
import org.coreframework.webflow.action.EditEntityFormAction;
import org.springframework.validation.Errors;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.webflow.Event;
import org.springframework.webflow.RequestContext;
import com.ihomey.aca.action.manage.it.EditBrandHistoryAction;
import com.ihomey.aca.entity.CateNews;
import com.ihomey.aca.service.CateNewsMgr;
/**
* <p>
* Title:添加与修改
* </p>
*
* <p>
* Description: BrandHistory 添加与修改操作
* </p>
*
* <p>
* Copyright: Copyright (c) 2007 10
* </p>
*
* <p>
* Company: DDH
* </p>
*
* @author Winner
* @version 2.0
*/
/*
* 美食美事
*/
@Form(objectClass = CateNews.class)
public class CateNewsEditAction extends EditEntityFormAction {
private CateNewsMgr cateNewsMgr;
public CateNewsMgr getCateNewsMgr() {
return cateNewsMgr;
}
public void setCateNewsMgr(CateNewsMgr cateNewsMgr) {
this.cateNewsMgr = cateNewsMgr;
}
/**
* 装载FORM,及初始化值操作
*
* @param context
* RequestContext
* @return Event
* @throws Exception
*/
public Event setupForm(RequestContext context) throws Exception {
super.setupForm(context);
return success();
}
/**
* 保存操作事件
*
* @param context
* RequestContext
* @return Event
* @throws Exception
*/
public Event save(RequestContext context) throws Exception {
CateNews cn = (CateNews) getFormObject(context);
Errors errors = getFormErrors(context);
if (cn != null) {
try {
EditBrandHistoryAction ebha = new EditBrandHistoryAction();
String content = ebha.reHtml(
context.getRequestParameters().get("content"), 5000).replace("'",
"''");
cn.setInfoContent(content);
cn.setPublishTime(new Date());
cateNewsMgr.saveCateNews(cn);
return success();
} catch (Exception e) {
return error();
}
}
}
}
********************************************
CateNewsEdit.jsp
--------------------------------------------
<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/brand_style.css">
<title>美食美事</title>
<script language="javascript" src="/fck/FCKeditor/fckeditor.js"></script>
</head>
<body style="margin: 50px 20px 20px 20px;">
<spring:bind path="cateNews.*">
<c:forEach var="error" items="${status.errorMessages}">
<B><FONT color=RED> <br>
<c:out value="${error}" /> </FONT></B>
</c:forEach>
</spring:bind>
<div class="title border"><c:if
test="${cateNews.cateNewsId==null}">
<c:out value="添加美事"></c:out>
</c:if> <c:if test="${cateNews.cateNewsId!=null}">
<c:out value="更新美事"></c:out>
</c:if></div>
<form action="food-mgr.htm" enctype="multipart/form-data" method="post">
<input type="hidden" name="_flowExecutionKey"
value="${flowExecutionKey}"> <input type="hidden"
name="_eventId" value="submit"> <c:if
test="${cateNews.cateNewsId!=null}">
<input type="hidden" name="cateNewsId"
value="${cateNews.cateNewsId}">
</c:if>
<table width="100%" border="0" cellpadding="0" cellspacing="1"
bgcolor="#FFFFFF">
<tr>
<td class="table" width="160" bgcolor="#d6dff7" valign="top"
align="right">美事标题</td>
<td class="table" valign="top"><input name="infoCaption" type="text"
size="30" value="${cateNews.infoCaption}" class="input1" /></td>
</tr>
<tr>
<td class="table" height="500" bgcolor="#d6dff7" align="right"
valign="top">美事内容</td>
<td class="table" valign="top">
<textarea name="content" id="content"
style="display: none">${cateNews.infoContent}</textarea>
<!--这个是用以前方法实现的,但不能直接把图片上传到服务器,所以这种方式不可取
<iframe
id="EditorDefault"
src="fck/FCKeditor/editor/fckeditor.html?InstanceName=Body&Toolbar=Default"
width="100%" height="300" frameborder="no" scrolling="no"></iframe>
-->
</td>
</tr>
<tr>
<td height="80" colspan="2" align="center" bgcolor="#E8F1FF">
<input type="submit" value="提交" width="60" height="27" border="0">
<input type="button" value="取消" onClick="javascript:history.back();">
</td>
</tr>
</table>
</form>
window.onload = function()
{
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value.
var language = '<bean:write name="language"/>';
language = language.toLowerCase();
var sBasePath = '../../FCKeditor/';
var oFCKeditor = new FCKeditor( 'content' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.Height = "500";
oFCKeditor.Width = "100%";
oFCKeditor.SkinPath = "../../FCKeditor/editor/skins/silver/";
if(language == 'zh_cn'){
oFCKeditor.Config["AutoDetectLanguage"] = "false";
oFCKeditor.Config["DefaultLanguage"] = "zh-cn";
}else{
oFCKeditor.Config["AutoDetectLanguage"] = "false";
oFCKeditor.Config["DefaultLanguage"] = "en";
}
oFCKeditor.ReplaceTextarea() ;
var oFCKeditor_en = new FCKeditor( 'content_en_us' ) ;
oFCKeditor_en.BasePath = sBasePath ;
oFCKeditor_en.ToolbarSet = "Default";
oFCKeditor_en.Height = "500";
oFCKeditor_en.Width = "100%";
oFCKeditor_en.SkinPath = "../../FCKeditor/editor/skins/silver/";
if(language == 'zh_cn'){
oFCKeditor_en.Config["AutoDetectLanguage"] = "false";
oFCKeditor_en.Config["DefaultLanguage"] = "zh-cn";
}else{
oFCKeditor_en.Config["AutoDetectLanguage"] = "false";
oFCKeditor_en.Config["DefaultLanguage"] = "en";
}
oFCKeditor_en.ReplaceTextarea() ;
}
</body>
</html>
************************************************
分享到:
- 2007-10-26 09:24
- 浏览 2878
- 评论(0)
- 论坛回复 / 浏览 (0 / 4224)
- 查看更多
相关推荐
FCKeditor作为一个强大的Web富文本编辑器,为网页内容创作提供了便利。通过深入理解其工作原理、配置和API,开发者可以轻松地将FCKeditor集成到自己的项目中,提供高质量的文本编辑体验。同时,利用开发文档,可以...
在这个例子中,我们将探讨如何将两者结合,以便在Java驱动的Web应用中集成FCKeditor,提供用户友好的文本编辑体验。 首先,我们需要理解FCKeditor的基本使用。FCKeditor通过JavaScript库在前端运行,允许用户在...
FCKeditor是一款强大的开源文本编辑器,主要用于网页内容的创建和编辑。它支持多种语言,包括中文,并且在JSP、Java以及J2EE...通过实践这个例子,开发者可以掌握FCKeditor的使用方法,提升其在实际项目中的应用能力。
2. **引用FCKeditor**: 在Default.aspx页面中,通过`<script>`标签引入FCKeditor的JavaScript文件,并创建一个`<textarea>`或自定义控件,然后使用JavaScript初始化FCKeditor。 3. **配置编辑器**: 在JavaScript...
1. 简单的文本编辑:创建一个表单,使用FCKeditor作为文本输入框,用户可以直接在界面上编辑文本,提交后保存到数据库。 2. 图片上传:集成FCKeditor的图片上传功能,允许用户在编辑器中选择本地图片并上传至服务器...
【简易博客 ASP.NET 源码 FCKeditor 示例】是一个非常适合初学者的项目,它提供了一个小型但完整的博客系统的源代码实现。这个博客系统是用ASP.NET技术构建的,一个微软推出的强大且广泛使用的Web应用程序框架。通过...
3. **配置FCKeditor**:在FCKeditor的配置文件中,定义一个自定义按钮或工具栏项,关联到表情图片的路径。这样用户就可以在编辑器中选择并插入这些表情。 4. **创建表情选择界面**:可以创建一个弹出窗口或浮动面板...
这个压缩包文件包含了一个可以运行的FCKeditor实例,让我们来深入了解一下这款编辑器及其应用。 FCKeditor的主要特点是它提供了类似Microsoft Word的编辑体验,允许用户在网页上进行文本格式化、插入图片、创建链接...
这篇博客文章“在EXT中使用FCKEditor编辑器例子”可能探讨了如何将FCKEditor集成到EXT应用中,为用户提供一个方便的文本编辑界面。 在EXT中集成FCKEditor,首先你需要理解EXT的基本概念,如组件(Component)、布局...
本文将围绕“用FCKeditor控件写的HTML在线编辑器一个小例子”这一主题,深入探讨FCKeditor及其应用。 FCKeditor是一款开源的富文本编辑器,曾广泛用于网站开发,它提供了丰富的文本格式化功能,如字体、颜色、列表...
**Fckeditor是一个强大的在线文本编辑器,主要用于网页内容的创建和编辑。在VS2005环境下,开发者可以集成Fckeditor来提供一个富文本编辑体验,使得用户在浏览器端能够像在桌面应用中一样编辑文本,包括添加图片、...
在这个例子中,`oFCKeditor.Create()`方法会在id为`myEditor`的textarea位置创建一个FCKeditor实例。 ### 四、加载到MyEclipse 要将FCKeditor加载到MyEclipse中,你需要按照以下步骤操作: 1. **创建Web项目**:...
FCKeditor 是一个基于JavaScript的开源富文本编辑器,支持多种浏览器如IE、Firefox、Chrome等。它允许用户在网页上编辑HTML内容,提供类似于Word的界面和功能,包括字体设置、颜色调整、图片上传等。 2. **集成...
在"studyfckeditor"这个压缩包中,很可能包含了一个示例项目,用于演示如何在网页中集成和使用FCKeditor。通常,这会包括以下步骤: 1. **下载与安装**:首先从FCKeditor官网下载最新版本,解压后将文件夹放入...
下载并解压提供的"FCKeditor"压缩包,你会得到一个包含所有必需文件和资源的目录结构。FCKeditor的核心文件通常包括`fckeditor.js`,这是编辑器的主要脚本文件,以及`editor`目录,其中包含了编辑器的样式、语言包和...
**Fckeditor:强大的在线...总之,Fckeditor是一个强大且灵活的在线文本编辑器,广泛应用于Web开发中,提供了一种高效、直观的文本编辑解决方案。通过深入理解和实践,开发者可以充分利用其功能,提升网站的交互体验。
这个压缩包中包含的文件是FCKeditor的一个完整实例,下面将对这些文件进行详细解释: 1. **sample.css**:这是一个样式表文件,包含了FCKeditor示例页面的样式规则。这些规则定义了编辑器界面的外观,如按钮、菜单...
FCKeditor是一个流行的开源富文本编辑器,而web EQ则是一个用于在网页中插入数学公式的编辑器。本示例将探讨如何将FCKeditor与web EQ整合,以便用户在编辑内容时能够方便地插入和编辑数学公式。 **FCKeditor介绍** ...
有两个方法在页面中建立一个FCKEDITOR编辑器: 方法1:内联方式(建议使用):在页面的FORM标记内需要插入编辑器的地方置入以下代码: script type="text/javascript"> var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;...