JEECMS 之 FCKeditor freemarker 浅谈

JEECMS 之 FCKeditor freemarker 浅谈

(2009-05-15 14:31:12)

转载

<script></script>标签： cms freemarker fckeditor ftl it

                    JEECMS （FCKeditor freemarker）

   最近开始接触到CMS(content managerment system 内容管理系统)，其实知道的人都晓得可以用它来开发个人网站，是相当简单的，哪怕对于不懂程序的人只要别人将CMS封装的相当完美那么你也可以构造出属于自己的个性网站，而像我们这些懂点编程的是比较喜欢那些开源的cms系统，因为我们可以用自己的双手修改源码来创造属于自己的网站。

   好了，不废话了进入正题。通过查阅相关的资料了解到开发 JEECMS系统(cms大军中的一员)(为什么要了解开发呢？因为自己的使用的过程中感觉使用有点不太顺手)需要了解的主要知识包括FCKeditor(文本编辑器)、Freemarker(模板引擎)、以及相关J2EE知识(JEECMS它里面包括Struts2 Spring2 Hibernate3)

今天在这里主要要讲的就是FCKeditor和Freemarker

其实FCKeditor就是一个富文本编辑器，这个是国外开发的它基本感觉等同于以前在.net中用到的第三方控件FreeTextBox，关于它的使用请看下文：

首先建立一个web project ，name ：prjFckEditor然后下载相关资源

FCKeditor.java 2.4 (FCKeditot for java)    jar文件
FCKeditor 2.6 (FCKeditor基本文件)

以下是下载地址：
http://www.fckeditor.net/download/default.html

将FCKeditor解压后整个目录copy到webroot下，然后将2个jar文件 copy至lib目录在讲FCKeditor.tld文件copy到prjFckEditor/WEB-INF/下

将下载后的FCKeditor工程src目录下的web.xml里的内容copy到咱们自己project的web.xml里进行合并，修改相关的设置
将SimpleUploader的Servlet的enadled参数值改为true(允许上传)，而Connector Servlet的baseDir参数值它是用来设置上传文件存放的位置的，这个根据自己的情况来设置。

修改Servlet的映射：
/editor/filemanager/browser/default/connectors/jsp/connector和/editor/filemanager/upload/simpleuploader，需要在两个映射前面加上/FCKeditor，即改为/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
/FCKeditor/editor/filemanager/upload/simpleuploader

这里你要是觉得资源过于多，可以删除无关的文件：
删除/FCKeditor/目录下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件以外的所有文件
删除目录/editor/_source,
删除/editor/filemanager/browser/default/connectors/下的所有文件
删除/editor/filemanager/upload/下的所有文件
删除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四个文件的所有文件

再次修改配置文件FCKeditor下的fckconfig.js将里面的FCKConfig.DefaultLanguage='zh-cn'
将下面的属性值进行对应的修改：
FCKConfig.LinkBrowserURL= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。
找到：FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

至此，相关的配置以前修改算是彻底的完成了，呵呵，FCKeditor相对来说比较适合开发新闻系统的发布，比方说我们请求一个action然后在execute方法里用session或者request的 setAttribute("key","value")；这里的value就是一个网页的源码，我们只是通过FCKeditor将它保存到了数据库中，每次请求主页或者其他页面的时候在将它查询出来显示，
添加文件 /TestFCKeditor/test.jsp:
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/TestFCKeditor" prefix="FCK" %>
<script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script>

<%--
三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>

<%--
<form action="show.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/prjFckEditor/FCKeditor/"
width="700"
height="500"
skinPath="/prjFckEditor/FCKeditor/editor/skins/silver/"
toolbarSet = "Default"
>
<%=reuqest.getAttribute("key")%>  <!-- 网页源码 -->
</FCK:editor>
<input type="submit" value="Submit">
</form>
--%>

<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px"><%=reuqest.getAttribute("key")%>  <!-- 网页源码 --></textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "/prjFckEditor/FCKeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

<%--
<form action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/prjFckEditor/FCKeditor/" ) ;
oFCKeditor.setValue( request.getAttribute("key") );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>
--%>

添加文件/prjFckEditor/show.jsp:
<%
String content = request.getParameter("content");
out.print(content);
%>
上面的show.jsp只是用来显示修改后的内容，我们只需要指定一个aciton来对数据库修改就可以搞定了。

编辑效果图：                 内容实现乱写的 相当于数据库查询出来的数据

 

 

Freemarker模板引擎
包括网页模板文件ftl(freemarker template language) 在通过与Freemarker的内置对象来结合就可以生成静态网页，但是这个ftl文件写起来是不好写的必须学习它的标签
下面写个简单的例子 hello.ftl
<html>
<head>
  <title>Welcome!</title>
</head>
<body>
  <h1>Welcome ${user}!</h1>
  <#list test as one>
  <a href="${ont.url}">${one.path}</a>!
  </#list>
</body>
</html>
其实它里面可以用html标签jsp标签等等，因为它兼容性很好
这里我用的是jsp+servlet结合，如下
   private Configuration cfg;
   public void init() throws ServletException {
 //初始化FreeMarker配置
        //创建一个Configuration实例
        cfg = new Configuration();
        cfg.setEncoding(Locale.getDefault(), "gbk");
        //设置FreeMarker的模版文件位置
        cfg.setServletContextForTemplateLoading(getServletContext(),"templates");   //templates是在webroot下的一个目录
     }
在doGet方法中加入如下代码：
     Map root = new HashMap();
     //放入对应数据key value
     testPO tp=new testPO();    
     tp.setPath("haha1");
     tp.setUrl("http://baidu.com1");
    
     testPO tp1=new testPO();
     tp.setPath("haha2");
     tp.setUrl("http://baidu.com2");
    
     testPO tp2=new testPO();
     tp.setPath("haha3");
     tp.setUrl("http://baidu.com3");
     ArrayList<testPO> al=new ArrayList()<testPO>;
     al.add(tp);
     al.add(tp1);
     al.add(tp2);
    
     root.put("user","张航");
  
    
     root.put("test", al);
     //取得模版文件
     Template t =cfg.getTemplate("hello.ftl");
     //开始准备生成输出
          //使用模版文件的charset作为本页面的charset
          //使用text/html MIME-type
     response.setContentType("text/html; charset=" + t.getEncoding());
     PrintWriter out = response.getWriter();
   
     //合并数据模型和模版，并将结果输出到out中
     try
     {  
      t.process(root,out);// 用模板来开发servlet可以只在代码里面加入动态的数据
     }
     catch(TemplateException e)
     {
      throw new ServletException("处理Template模版中出现错误", e);
     }
这样就完成了用Freemarker来生成静态页面是不是比较简单，这里由于自己才开始接触到所以举得例子相对于高手或者接触此类已经有段时间的大虾们来说相当于玩笑一样，只是自己自己又了解了点新东西拿出来晒晒，这样也可以帮助学习它们的新手快速入门，呵呵！
  好了，今天的内容就简单讲到这里，以后有了更深步的体会还会继续拿出来晒晒的，大家有什么好的提议也可以对我说出来，欢迎高手指导指导！