在线编辑器:Fckeditor的使用

Posted on 2009-09-02 11:58 java小爬虫 阅读(2373) 评论(2)  编辑  收藏
 

1 下载FCKeditor_2.6.4.1,fckeditor-java,fckeditor-java-demo-2.4.2.war;

2 html文件中使用fckeditor

 解压FCKeditor_2.6.4.1,把FCKeditor_2.6.4.1中的fckeditor文件夹复制到webroot目录下,删除出错文件(fck_docprops.html文档类文件)。

   新建文件如下test1.html

  <html>

       <head>

              <title>test1.html</title>

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

       </head>

       <body>

              <form action="index.jsp" method="post">

       <script type="text/javascript">

var oFCKeditor = new FCKeditor( 'content' ) ;

oFCKeditor.BasePath = "/fck_test/fckeditor/" ;<!-- fck_test为项目名称 -->

oFCKeditor.Width       = 1000 ;

oFCKeditor.Height      = 300 ;

oFCKeditor.ToolbarSet      ="Basic" ;

oFCKeditor.Value       = '<p>This is some <strong>sample text<\/strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor<\/a>.<\/p>' ;

oFCKeditor.Create() ;

              </script>

                     <input type="submit" value="Submit" />

              </form>

       </body>

</html>

 

 

 

<html>

       <head>

              <title>test2.html</title>

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

              <script type="text/javascript">

window.onload = function()

{

       var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;

oFCKeditor.BasePath = "/fck_test/fckeditor/" ;

       oFCKeditor.ReplaceTextarea() ;

}

       </script>

       </head>

       <body>

              <form action="" method="post"

                     target="_blank">

                     <div>

                            <textarea name="FCKeditor1" rows="10" cols="80"

                                   style="width: 100%; height: 200px">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://www.fckeditor.net/"&gt;FCKeditor&lt;/a&gt;.&lt;/p&gt;</textarea>

                     </div>

                     <br />

                     <input type="submit" value="Submit" />

              </form>

       </body>

</html>

 

 

   3 jsp中使用fckeditor

   解压fckeditor-java-demo-2.4.2.war,找到5jar包,导入工程。

  

   新建文件如下:test1.jsp

  

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ taglib uri="http://java.fckeditor.net" prefix ="FCK" %>

 

<html>

  <head>

  </head>

 

  <body>

  <form action="index.jsp" method="post">

   <form action="index.jsp" method="post">

    <FCK:editor instanceName="myEditor" basePath="/fckeditor" value="dfadsfds"></FCK:editor>

  <input type="submit" value="Submit" />

  <input type="submit" value="Submit" />

  </form>

  </body>

</html>

 

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>

  <head>  

  </head>

  <body>

    <%

       request.setCharacterEncoding("utf-8");

       System.out.println(request.getParameter("myEditor"));

     %>

     ${param.myEditor}

  </body>

</html>

 

 

 

 

fckeditor对象的属性:

         Width ,Height,Value,ToolbarSet="Default/Basic", BasePath;

 

fckeditor配置文件

   在配置文件中修改如下一项:(fckconfig.js)  

 FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath+'fck_config.js' ;

 

 新建配置文件fck_config.js ,内容如下,对fckeditor进行自定义:

 

FCKConfig.AutoDetectLanguage     = false ; <!—自动检测语言 -->

 

FCKConfig.ToolbarSets["my"] = [

       ['Source','DocProps'],

       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

       ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],

       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

       ['Link','Unlink','Anchor'],

       ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

       '/',

       ['Style','FontFormat','FontName','FontSize'],

       ['TextColor','BGColor'],

       ['FitWindow','ShowBlocks','-','About']           

] ;        <!—配置工具条 -->

 

FCKConfig.FontNames            = '宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial' ;           <!—配置字体 -->

 

FCKConfig.EnterMode = 'br' ;                // p | div | br

FCKConfig.ShiftEnterMode = 'p' ;   // p | div | br   <!—配置换行格式 -->

 

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;

 

FCKConfig.SmileyPath      = FCKConfig.BasePath + 'images/smiley/msn/' ;

FCKConfig.SmileyImages  = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif','100_3650.JPG'] ;

FCKConfig.SmileyColumns = 8 ;

FCKConfig.SmileyWindowWidth            = 320 ;

FCKConfig.SmileyWindowHeight     = 210 ;        <!—配置css以及表情图片及显示方式 -->

 

 

文件上传:

 

web.xml文件中加入:

 

       <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>

              <!-- Do not wrap this line otherwise Glassfish will fail to load this file -->

              <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>

       </servlet-mapping>

      

       src下新建文件fckeditor.properties内容如下:

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

      

       这样,就可以进行文件的上传

      

      

       文件上传可能出现的问题:中文文件名乱码

    解决方案:

      

        找到ConnectorServlet类,关联源码:

        

        找到如下所示代码,增加upload.setHeaderEncoding("utf-8");

        

             FileItemFactory factory = new DiskFileItemFactory();

                            ServletFileUpload upload = new ServletFileUpload(factory);

                            upload.setHeaderEncoding("utf-8");//增加编码格式

                            try {

 

                                   List<FileItem> items = upload.parseRequest(request);

                                  

       ConnectorServlet作为自己的类使用,在web.xml中修改配置如下;

<servlet>

              <servlet-name>Connector</servlet-name>

              <servlet-class>

                     com.ConnectorServlet   //修改成自己的类

              </servlet-class>

              <load-on-startup>1</load-on-startup>

       </servlet>

      

      

       这样就解决了文件中文名的乱码问题

      

      

       修改文件上传的类型:

      

       服务器端: fckeditor.properties中加入

       connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png|abc

       客户端:fck_config.js加入

       FCKConfig.ImageUploadAllowedExtensions  = ".(jpg|gif|jpeg|png|bmp|abc)$" ;              // empty for all

                                  

                                    

Feedback

# re: 在线编辑器:Fckeditor的使用  回复  更多评论   

2009-09-02 14:51 by mcframe
哈哈,终于有人再用了,我也觉得这个编辑器不错,有问题的可以问偶哦

# re: 在线编辑器:Fckeditor的使用  回复  更多评论   

2009-10-13 16:06 by 星期五
@mcframe
正好问你 这个编辑器 2.3 跟 2.4 之间有个问题,2.3 选择字体,鼠标点击不会还原上一个字体,但是 2.4选择字体后,鼠标点击时会还原上一个字体。这是配置问题,还是代码问题?

只有注册用户登录后才能发表评论。


网站导航: