zoukankan      html  css  js  c++  java
  • fckeditor使用(转)

    fckeditor - (1)资料介绍与安装
     fckeditor介绍
     
     FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。
     
     1.fckeditor官网:http://www.fckeditor.net/
     
     2.fckeditor下载:http://www.fckeditor.net/download
      FCKeditor_2.6.3(客户端javascript主程序)http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.3.zip
      FCKeditor.Java(支持j2ee web平台服务器端程序)
      fckeditor-java-2.4-bin.zip(执行文件)
      http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-bin.zip
      fckeditor-java-2.4-src.zip(源文件)
      http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-src.zip
      fckeditor-java-demo-2.4.war(样例)
      http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-demo-2.4.war
      
     3.fckeditor样例 http://www.fckeditor.net/demo/
      demo1:默认fckeditor
      demo2:多语言
      demo3:自定义工具集
      demo4:更换皮肤
      
     4.fckeditor文档 http://docs.fckeditor.net/
      开发者手册:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
      使用者手册:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
     
     
     安装
     参考文档:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Installation
     
     试验环境:
     MyEclipse6.0+Tomcat5.0+Mysql5.0
     
     步骤:
     
     1.在MyEclipse中新建一个web工程TestFckeditor
     2.把FCKeditor_2.6.3解压后的生成的文件夹fckeditor拷贝到WebRoot下
     3.检测安装是否成功访问http://127.0.0.1:8888/TestFckeditor/fckeditor/_samples/default.html


    fckeditor - (2)集成

     集成javascript步骤
     
      参考文档:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/JavaScript
      
      
      1.将JavaScript集成模块脚本放入<head>标签中
      
       Html代码
       <script type="text/javascript" src="fckeditor/fckeditor.js"></script>  
       
       <script type="text/javascript" src="fckeditor/fckeditor.js"></script> 
      
      2.创建fckeditor 
       方法一:(内联)
        在<body>标签适当位置放入如下代码(通常放在标签中)
        
        Html代码
        <script>   
        var oFCKeditor = new FCKeditor('FCKeditor1');  
        oFCKeditor.BasePath = "fckeditor/";   
        oFCKeditor.Create();   
        </script>    
      
      
       方法二:(替代<textarea>)
        在<head>标签中添加onload方法 
        
        Html代码
        <script>   
        window.onload = function()   
        {   
        var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;   
        oFCKeditor.BasePath = "fckeditor/" ;   
        oFCKeditor.ReplaceTextarea() ;   
        }   
        </script> 
        
        在<body>标签中添加以下代码
        
        Html代码
        <textarea id="MyTextarea" name="MyTextarea">   
        This is <b>the</b> initial value.  
        </textarea> 
      
       方法三:(动态生成)
      
        在<head>标签中定义 createFckeditor()方法
        
        Html代码
        <script>   
        function createFckeditor()  
        {   
        var div = document.getElementById("myFCKeditorDiv");   
        var fck = new FCKeditor("myFCKeditor");   
        fck.BasePath = "fckeditor/" ;   
        div.innerHTML = fck.CreateHtml();   
        }   
        </script>   
      
      
        在中div中动态显示fckeditor
        
        Html代码
        <a href="javascript:void(0);" onclick="createFckeditor();"> 动态创建fckeditor </a>   
        <div id="myFCKeditorDiv"> </div>   
     
     
     
     fckeditor对象属性
     
     
      属性名  描述           默认值
      Width   宽度            100%  
      Height   高度            200
      Value   编辑器初始化内容         空字符串 
      ToolbarSet  工具条集合的名称(Default,Basic,或自定义)    Default
      BathPath  编辑器的基路径,BasePath要正确设置,以“/”结尾 /fckeditor 
      
      例如:
      
      Js代码
      var oFCKeditor = new FCKeditor( 'MyFckeditor' ) ;  
      oFCKeditor.BasePath = "fckeditor/" ;   
      oFCKeditor.Width="80%";   
      oFCKeditor.Height="200";   
      oFCKeditor.Value="ok";   
      oFCKeditor.ToolbarSet="Basic";  
     

     
     fckeditor构造器
     
      Js代码
      var fckeditor=function(instanceName,width,height,toolbarSet,value) ;  
      
      instanceName:编辑器输出的textarea元素的name属性或id属性的值,必须指定其他参数会赋给同名属性
      
      例如: 
      
      Js代码
      var oFCKeditor = new FCKeditor( 'MyFckeditor' ,'80%','300','Basic','ok') ; 
      
     
     
     
     集成java步骤
     
      1.载入jar包
       
       将fckeditor-java-demo-2.4.war放入运行中的tomcat安装目录下的webapps文件夹中让其解压,从解压后的fckeditor-java-demo-2.4WEB-INFlib下拷贝所有的jar文件,加入web工程的classpath中(可以拷贝到WebRootWEB-INFlib文件夹下)
       
       jar文件包括:
        fckeditor-java-core-2.4.jar
        commons-fileupload-1.2.1.jar
        commons-io-1.3.2.jar
        slf4j-api-1.5.2.jar
        slf4j-simple-1.5.2.jar
      
      2.在jsp页面中加入tablib指令和fck标签
       参看fckeditor-java-core-2.4.jar/META-INF/FCKeditor.tld
       
        Xml代码
        <short-name>FCK</short-name> 
        <uri>http://java.fckeditor.net</uri> 
       
       在jsp页面中加入tablib指令
       
        Html代码
        <%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>  
       
       在<body>中加入自定义标签
       
        Html代码
        <FCK:editor instanceName="fck1" basePath="/fckeditor" value=" "></FCK:editor> 
       
       注意:basePath以"/"开头代表工程的根路径而非web服务器的根路径,一定要指定value属性,而且值不能为空字符串"",否则会抛NullPointException。


    fckeditor - (3)配置
     参看文档:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_File
     
     
     自定义配置方法
     
      1.直接修改主配置文件fckconfig.js
     
       fck主配置文件:fckeditor/fckconfig.js
     
     
     
      2.定义单独的配置文件(只需要写需要修改的配置项)
     
     
       2.1.创建myfckconfig.js配置自定义属性
     
        将myfckconfig.js放入fckeditor/editor文件夹下,
     
         Java代码
         //系统是否自动检测并运用适当的语言界面  
         FCKConfig.AutoDetectLanguage = false ;  
         //手动设置默认的语言:法语  
         FCKConfig.DefaultLanguage = "fr" ; 
     
     
     
       2.2载入自定义配置文件
        方法一:全局载入(对工程中所有fckeditor有效)
         在fckconfig.js找到
         
          Js代码
          FCKConfig.CustomConfigurationsPath = '' ; 
         
         输入myfckconfig.js位置,FCKConfig.BasePath值fckeditor/editor文件夹
         
          Js代码
          FCKConfig.CustomConfigurationsPath = FCKConfig.BasePath+'myfckconfig.js ' ; 
        
        
        方法二:局部载入(只对当前网页有效)
        
         Js代码
         var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;  
         oFCKeditor.Config["CustomConfigurationsPath"] = "myconfig.js"  ;  
         oFCKeditor.Create() ; 
        
        
     
      3.在页面的调用代码中对FCKeditor的实例进行配置
     
       Js代码
       var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;  
       oFCKeditor.Config["AutoDetectLanguage"] = "fasle"  ;  
       oFCKeditor.Create() ; 
     
     
     
     配置加载顺序
     
      1.加载主配置文件fckconfig.js
      
      2.加载自定义的配置文件(如果有),覆盖相同的配置项
      
      3.使用对实例的配置覆盖相同的配置项(只对当前实例有效)
     
     
     
     主配置文件(fckconfig.js部分属性中文注释)
     
      Js代码
      FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称      
      FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath 'css/fck_editorarea.css'; // 编辑区的样式表文件      
      FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格      
      FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS      
      FCKConfig.DocType = '' ;//文档类型      
      FCKConfig.BaseHref = ''; // 相对链接的基地址      
      FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容      
      FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"      
      FCKConfig.Debug = false ;//是否开启调试功能      
      FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath 'skins/default/' ; //皮肤路径      
      FCKConfig.PreloadImages=... //预装入的图片      
      FCKConfig.PluginsPath = FCKConfig.BasePath 'plugins/' ; //插件路径      
      FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言      
      FCKConfig.DefaultLanguage   = 'zh-cn' ; //默认语言      
      FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左      
      FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体      
      FCKConfig.IncludeLatinEntities = true ; //包括拉丁文      
      FCKConfig.IncludeGreekEntities = true ;//包括希腊文      
      FCKConfig.ProcessNumericEntities = false ;//处理数字实体      
      FCKConfig.AdditionalNumericEntities = '' ;   //附加的数字实体      
      FCKConfig.FillEmptyBlocks = true ; //是否填充空块      
      FCKConfig.FormatSource   = true ; //在切换到代码视图时是否自动格式化代码      
      FCKConfig.FormatOutput   = true ; //当输出内容时是否自动格式化代码      
      FCKConfig.FormatIndentator = '    ' ; //当在源码格式下缩进代码使用的字符      
      FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上      
      FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容      
      FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE      
      FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单      
      FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体      
      FCKConfig.TabSpaces   = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格      
      FCKConfig.ShowBorders = true ;//合并边框      
      FCKConfig.SourcePopup = false ;//弹出      
      FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开      
      FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏      
      FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值      
      FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引      
      FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出      
      FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板      
      FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,      
      FCKConfig.ToolbarSets = object ; // 编辑器的工具栏,可以自行定义,删减,可参考已存在工具栏      
      FCKConfig.EnterMode = 'p'; // 编辑器中直接回车,在代码中生成,可选为p | div | br      
      FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift 回车,在代码中生成,可选为p | div | br      
      FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容   
      FCKConfig.FontColors = ""; // 文字颜色列表      
      FCKConfig.FontNames = ""; // 字体列表      
      FCKConfig.FontSizes = ""; // 字号列表      
      FCKConfig.FontFormats = ""; // 文字格式列表   
      FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置      
      FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置      
      FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器      
      FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址   
      FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容      
      var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py         
      var _QuickUploadLanguage = 'php' ;// asp | aspx | cfm | lasso | php[/code]    //第一个是文件浏览器使用的语言,第二个快速上传使用的语言,改成你需要的      
      FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all      
      FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"    //这是两个允许和拒绝上传的文件类型列表      
      FCKConfig.ImageBrowser = false ;//是否在插入图片功能里面启用服务器文件浏览功能      
      FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' _FileBrowserLanguage '/connector.' _FileBrowserExtension ;      
      //Type=Image   表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面      
      FCKConfig.FlashBrowser = false ;//是否在插入flash功能中启用服务器文件浏览功能      
      FCKConfig.LinkUpload = false ;//是否启用插入链接的快速上传功能      
      FCKConfig.ImageUpload = false ;//是否启用图片快速上传功能      
      FCKConfig.FlashUpload = false ;//是否启用flash上传功能  
      FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath 'images/smiley/msn/'; // 表情文件存放路径      
      FCKConfig.SmileyImages = ''; // 表情文件名称列表,具体参考默认设置      
      FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数      
      FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度,此窗口会因为表情文件的改变而作调整      
      FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度,此窗口会因为表情文件的改变而作调整     
     
     
     常用自定义配置样例
     
     
     
      修改语言
      
       Js代码
       FCKConfig.AutoDetectLanguage = false ;  
       FCKConfig.DefaultLanguage = 'zh-cn' ; 
      
     
      
      添加中文字体
      
       Js代码
       FCKConfig.FontNames  = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; 
       
      
      
      
      更换换行模式
      
       Js代码
       FCKConfig.EnterMode = 'br' ;       // p | div | br  
       FCKConfig.ShiftEnterMode = 'p' ; // p | div | br 
      
      
      
      自定义表情
      
       Js代码
       FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/ftl/' ;  
       FCKConfig.SmileyImages =['01.gif','02.gif','03.gif','04.gif','05.gif','06.gif','07.gif','08.gif','09.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif'] ;  
       FCKConfig.SmileyColumns = 8 ;  
       FCKConfig.SmileyWindowWidth = 480 ;  
       FCKConfig.SmileyWindowHeight = 180 ; 
       
       如果表情图片太多,可以设置滚动条
      
           1.在fckeditor/editor/dialog/fck_smiley.html 中找到
       
         Js代码
         window.onload = function ()  
         {  
         oEditor.FCKLanguageManager.TranslatePage(document) ;  
         dialog.SetAutoSize( true ) ;  
         } 
         
         将dialog.SetAutoSize( true ) 改为dialog.SetAutoSize( false)
         
           2.再找到
       
         Html代码
         <body style="overflow: hidden"> 
         <body> 
         
         将 hidden改为auto
         
       
       
       
       更换皮肤
       
        Js代码
        FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ; 
        
         fckeditor默认提供三种皮肤,如果想得到更多皮肤请访问:
         http://sourceforge.net/tracker/?atid=740153&group_id=75348&func=browse
      
      
      
      
      
      自定义工具集
      
        fckeditor提供两种工具集Default/Basic,也可以自己定义
      
       Js代码
       FCKConfig.ToolbarSets["MYTOOLBAR"] = [  
           ['Source','-','FitWindow','-','Preview'],  
           ['Undo','Redo'],  
           ['Link','Unlink','Anchor'],  
           ['Image','Flash','Table','Rule','Smiley','SpecialChar'],  
           ['JustifyLeft','JustifyCenter','JustifyRight'],  
           ['About'],  
           '/',  
           ['Bold','Italic','Underline'],  
           ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],  
           ['FontName','FontSize'],  
           ['TextColor','BGColor']  
       ] ; 
      
      
      在页面调用,要显示设置FCKeditor对象的ToolbarSet属性
      
      Java代码
       var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;  
       oFCKeditor.BasePath = "fckeditor/" ;  
       oFCKeditor.Config["CustomConfigurationsPath"] ='myfckconfig.js ' ;  
       oFCKeditor.ToolbarSet="MYTOOLBAR";  
       oFCKeditor.Create(); 


    fckeditor - (4)文件上传
     fckeditor默认不支持文件上传,需要下载web服务器端程序(fckeditor.java),并进行配置
     
     1.在web.xml中加入ConnectorServlet的配置信息
     
      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> 
         <url-pattern> 
          /fckeditor/editor/filemanager/connectors/*  
         </url-pattern> 
       </servlet-mapping> 
     
     
     
     2.在classpath路径上创建fckeditor.properties(在src文件夹下创建)
     
      Java代码
       connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl 
     
     
     
     乱码问题
     
      由于fckeditor未考虑中文乱码问题,所以需要对ConnectorServlet做修改
     
     
      解决fckeditor创建文件夹中文乱码问题
     
       在ConnectorServlet的doGet方法中找到String newFolderStr = UtilsFile.sanitizeFolderName(newFolderName);这行代码,在其上添加如下2行代码。
     
       Java代码
        //NewFolderName为新创建的文件夹名称,先用iso-8859-1编码将字符串还原成字节数组,在用utf-8重新编码  
        String newFolderName = request.getParameter("NewFolderName");  
        newFolderName = new String(newFolderName.getBytes("iso-8859-1"), "utf-8");  
         
        String newFolderStr = UtilsFile.sanitizeFolderName(newFolderName); 
     
     
      解决上传文件名为中文文件时出现乱码
       fckeditor在java平台采用的是commons-upload组件进行文件上传,只要修改ServletFileUpload的headerEncoding属性为utf-8就能解决上传文件名是中文时所出现的乱码问题。在ConnectorServlet的doPost方法中找到ServletFileUpload upload = new ServletFileUpload(factory);在其后加入下面代码

       Java代码
        FileItemFactory factory = new DiskFileItemFactory();  
        ServletFileUpload upload = new ServletFileUpload(factory);  
         
        //解决上传文件名为中文名时出现乱码  
        upload.setHeaderEncoding("utf-8"); 
     
     
     中文图片不能引用
      修改server.xml 端口为8080的Connector,添加属性URIEncoding="UTF-8"
     
      Xml代码
       <Connector port="8080" maxHttpHeaderSize="8192" 
                     maxThreads="150" minSpareThreads="25" maxSpareThreads="75" 
                     enableLookups="false" redirectPort="8443" acceptCount="100" 
                     connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="UTF-8" /> 
     
     
     
     
     解决上传文件名重名问题
     
      上传文件名用uuid随机生成的32位字符串代替,防止文件名重复
     
      Java代码
       String filename = FilenameUtils.getName(rawName);  
       String baseName = FilenameUtils.removeExtension(filename);  
       String extension = FilenameUtils.getExtension(filename);  
        
        //上传文件名用uuid随机生成的32位字符串代替,防止文件名重复  
       filename=UUID.randomUUID().toString().replace("-", "")+"."+extension; 
     
     
     
     控制允许上传文件的文件类型
      fckeditor把上传的文件分为四种:file,Image,Flash,Media
      fckeditor会对上传文件的类型进行两次验证(前台javascript验证和后台java验证)所以需要对myconfig.js和fckeditor.propertise进行配置
      例如:限制上传图片格式为gif和png
      在myconfig.js增加下面配置(可参看fckconfig.js的具体配置选项)
      
      Js代码
       FCKConfig.ImageUploadAllowedExtensions = ".(gif|png)$" ; 
      
      
     在fckeditor.propertise进行配置(可参看)
      
      Java代码
       connector.resourceType.image.extensions.allowed=gif|png 
      
      
     
     控制允许上传文件的文件大小
     
      1.在服务端的servlet中,在保存文件之前先判断一下文件大小,如果超出限制,就传递一个自定义的错误码,并且不再保存文件,在ConnectorServlet的doPost方法中找到if (!ExtensionsHandler.isAllowed(resourceType, extension))
      在后面添加else if语句块
      
       Java代码
        //如果文件的扩展名不允许上传  
        if (!ExtensionsHandler.isAllowed(resourceType, extension))  
            ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);  
        //如果文件大小超出限制10k  
        else if(uplFile.getSize()>10*1024){  
        //传递一个自定义的错误码  
            ur = new UploadResponse(204);  
        }  
        //如果不存在以上错误,则保存文件  
        else {  
            ...  
         
        } 
      
      2.修改对应的页面中的回调函数,增加对这个自定义的错误码的处理
      找到fckeditor/editor/filemanager/browser/default/frmupload.html和fckeditor/editor/dialog/fck_image/fck_image.js中的OnUploadCompleted方法,
      在switch 语句块中添加如下代码
      
       Js代码
        case 204 :  
           alert( '文件太大' ) ;  
           break ; 

  • 相关阅读:
    软件需求分析阅读笔记2
    Ubuntu上的Hbase集群搭建
    Form的Load事件的添加
    软件需求与分析大作业进度(二)
    软件需求与分析大作业进度(一)
    第四周学习进度总结
    使用vmware+Ubuntu搭建hadoop集群
    团队十日冲刺10
    用户模板和用户场景
    团队十日冲刺9
  • 原文地址:https://www.cnblogs.com/rixiang/p/5254093.html
Copyright © 2011-2022 走看看