FCKEditor 应用（一） -- 在JSF中的安装与使用

lqixv

浏览: 213042 次
性别:
来自: 深圳

最近访客更多访客>>

jtzy

caozhenndsc

feiyue81

weet77

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前台技术

fckeditor JSF Servlet JavaScript Web

首先，是安装与配置：

1、从 FCKEditor 网站上下载最新版本的 FCKEditor （我现在用的版本是：2.6.3，如果没有特殊情况，以后的2.x.x版本应该同样适用）
2、从 FCKEditor 网站上下载最新版本的 FCKEditor-java-2.4-bin.zip
3、把java包中的lib内的3个jar包、FCKEditor-java-core-2.4.jar，共4个包放到自己的应用程序库目录中。另外，还要去下载一个 slf4j-simple-1.5.2.jar 放入应用程序库目录中。
4、把 FCKEditor 简化（可选）：
（1）、根目录下只留下以下这些文件和目录，其它的删除掉：fckconfig.js、fckeditor.js、fckpackager.xml、fckstyles.xml、fcktemplate.xml、editor(目录)
（2）、进入目录 editor，删除目录 _Source
（3）、进入目录 editor/filemanager/connectors，把里面的文件全部删除
（4）、进入目录 editor/lang，除文件 en.js、zh.js、zh-cn.js 外，其余文件全部删除
（5）、进入目录 editor/skins，只留下 default 目录，其余的全部删除（如果你喜欢别的样式，可以留下你想要的样式，然后把其余的删除掉，再把你想要的样式目录改为default即可）
5、把简化后的 FCKEditor 拷贝到你的 web 应用程序根目录下
6、在 WEB-INF/web.xml 中添加如下内容（用于文件上传）：

  <!-- FCKeditor file upload begin -->
  <servlet>
    <servlet-name>Connector</servlet-name>
    <servlet-class>
       net.fckeditor.connector.ConnectorServlet
    </servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>
       /fckeditor/editor/filemanager/connectors/*
    </url-pattern>
  </servlet-mapping>
  <!-- FCKeditor file upload end -->

7、在 WEB-INF/classes/ 下添加一个文件，文件名为：fckeditor.properties，文件内容为：

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

至此，FCKeditor 安装配置完毕。

其次，在 JSF 中的调用方法：

1、引入 javascript 文件：

<script type="text/javascript" src="fckeditor/fckitor.js"></script>

2、在使用 JSF 文件中，对应的标签必须是 Textarea，然后在其后面跟着对此 Textarea 的初始化。

例子如下：

<%@taglib uri …… prefix="f"%>
<%@taglib uri …… prefix="h"%>
<html>
  <head>
    <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
  </head>
  <body>
  <f:view>
    <h:form id="fck">
      内容：<h:inputTextarea id="content" value="#{user.content}"/>
      ……
<script type="text/javascript">
  var oFCKeditor = new FCKeditor("fck:content");
  oFCKeditor.basePath="fckeditor/";
  ……
  oFCKeditor.ReplaceTextarea();
</script>

    </h:form>
  </f:view>
</body>
</html>

附件为可运行的例子。

也可以到这里下载：

完整例子源代码：http://www.namipan.com/d/a42cc8c506e86596c7617e0ae4729b240334de17366c3d00

jsf.war.rar (3.8 MB)
下载次数: 62

1
顶

0
踩

分享到：

FCKEditor 应用（二） -- 在编辑器外使用fc ... | JS操作将图片放入剪切板

2008-11-12 11:28
浏览 1705
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论