zoukankan      html  css  js  c++  java
  • FCKeditor配置和精简【附源码】

    FCKeditor介绍

      FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务。它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net、ASP、ColdFusion 、PHP、Java、Active-FoxPro、Lasso、Perl、ython 等编程环境。

      官方网站http://www.fckeditor.net/

      官方文档http://wiki.fckeditor.net/

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

     

          其实不同版本的FCKeditor配置过程基本类似,这里拿最新的2.63作为实例进行介绍。

      
    FCKeditor安装和配置

      到http://www.fckeditor.net,下载FCKeditor2.63.zip和FCKeditor.NET2.63版的2个zip包

      (a)   FCKeditor_2.6.3是其最新的Javascript文件和图片等;

      (b)   FCKeditor.Net_2.6.3.zip是一个ASP.NET控件DLL文件。

      将a解压缩,得到FCKeditor的核心文件,将其拷贝到web项目的根目录下(建议,当然你可以任意放)。然后解压b,得到.NET支持的源码,进入,bin下的Release中存在FCKeditor的DLL(这里也有debug文件夹,建议使用release),我们需要在项目中添加对其引用即可。 

      1.工程浏览器上右键,选择添加引用(Add Reference…),找到浏览(Browse)标签,然后定位到你解压好的FredCK.FCKeditorV2.dll,确认就可以了。这时,FCKPro工程目录下就多了一个bin文件夹,里面包含FredCK.FCKeditorV2.dll文件。

      2.为了方便RAD开发,我们把FCKeditor控件也添加到VS的工具箱(Toolbox)上来,展开工具箱的常用标签组(General),右键选择组件(Choose Items…),在对话框上直接找到浏览按钮,定位FredCK.FCKeditorV2.dll,然后确认就可以了。

      3. 配置WebConfig,在<appSettings>节点添加,如下所示:

        <appSettings>
            
    <add key="FCKeditor:BasePath" value="/Web/fckeditor/"/>
            
    <add key="FCKeditor:UserFilesPath" value="/Web/Upload/" />        
        
    </appSettings>

      说明:"/Web/"是项目名称。

      BasePath:fckeditor是FCKeditor整个文件夹所在的目录。

      UserFilesPath:上传文件、图片等存储的路径。

          完成之后,再完成了下面的详细配置中的第一条,我们就可以使用FCKeditor控件了。为了更好的调试这个工具,使得其满足我们的实际需要,必须对其属性的设置进行修改。

    FCKeditor详细的设置:

      进入FCKeditor文件夹,编辑 fckconfig.js 文件。其实里面罗列的都比较清楚,编写比较规范,还有一些注释,但是只要略懂英文的就能够看得懂,操作起来也非常的方便。下面就简单介绍几种常用的设置作为一个小例子。

      1、指定匹配语言类型。此步骤是必须的,也是最重要的一步,必不可少的。

      原来:

        var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

        var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

      改为:

        var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

        var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php

      2、配置语言包。有英文、繁体中文等,这里我们使用简体中文。

      原来:

        FCKConfig.DefaultLanguage = 'en' ;

      改为:

        FCKConfig.DefaultLanguage = 'zh-cn' ;

      3、配置皮肤。有default、office2003、silver风格等,这里我们可以使用默认。

        FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

      4、在编辑器域内可以使用Tab键。(1为是,0为否)

        FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;

      5、常用的字体,例如:

      修改

        FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

      改为:

        FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'

      6、编辑器域内默认的显示字体为12px,想要修改可以通过修改样式表来达到要求,打开/editor/css/fck_editorarea.css,修改font-size属性即可。如font-size: 14px;

      7、ToolBar中编辑项的设置。

      如果你的编辑器用在网站前台的话,那就不得不考虑安全了,在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,也就是基本的toolbar,你可以根据自己的需要,重新写一个类型。只要包含你需要的编辑项即可。

      FCKConfig.ToolbarSets["Basic"] = [
         ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','Image','-','About']
      ] ; 

      其实这些,你都可以按自己的需求进行设置,功能的足够强大为了提供了更多的选择,肯定能够满足你的需求。

    当然也可以配置一下WebConfig,也能让它确保安全,接下来我们将讲到。

     

    FCKEditor 2.6的问题:

      1.FCKeditor出现"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"错误的解决办法

    打开editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法,返回true   

    private bool CheckAuthentication()
    {
            
    return true;
    }


      2.在上传文件窗口点击浏览服务器,会出现the server didn't send back a proper xml.....错误提示,因为后期版本的FCKEditor要求不同类型的文件分别传到不同的目录,包括file,image,falsh,media等目录,一定要先建立起来。


    FCKeditor精简

      进入FCKeditor文件夹,把所有“_”开头的文件和文件夹删掉,这些都是一些范例,只保留editor文件夹、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了;

      进入editor文件夹,删掉“_source”文件夹,里面放的同样是源文件;

      退回上一级目录进入filemanager文件夹,有browser和upload两个文件夹。进入browser"default"connectors,只保留aspx文件夹,其余的删掉;mcpuk目录亦可删除;upload也一样,只保留aspx文件夹;

      退到editor再进入images文件夹,smiley里面放的是表情图标,有msn和fun两个系列,如果你想用自己的表情图标,可以把它们都删除;如果你想用这里的表情图标那就不要删了;

      lang里面放的是语言包,如果只是用简体中文,那么只保留fcklanguagemanager.js、zh-cn.js两个文件就行了,建议也保留en.js(英文)、zh.js(繁体中文)两个文件,fcklanguagemanager.js是语言配置文件,有了它才能和fckconfig.js里的设置成对,对应上相应的语言文件,一定要保留!

      再退出lang文件夹,进入skins文件夹,如果你想使用FCKeditor默认的奶黄色,那就把除了default文件夹外的另两个文件夹直接删除,如果想用别的,那就看你自己的喜好了。 

          精简版下载

    实例下载:

      为了更好说明上述一切,专门写了一个简单的Web项目,让大家更加清晰的了解FCKeditor的配置和使用。

      实例源码下载

  • 相关阅读:
    KnockoutJS 3.X API 第五章 高级应用(4) 自定义处理逻辑
    KnockoutJS 3.X API 第五章 高级应用(3) 虚拟元素绑定
    KnockoutJS 3.X API 第五章 高级应用(2) 控制后代绑定
    KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定
    KnockoutJS 3.X API 第四章(14) 绑定语法细节
    KnockoutJS 3.X API 第四章(13) template绑定
    KnockoutJS 3.X API 第四章 表单绑定(12) selectedOptions、uniqueName绑定
    KnockoutJS 3.X API 第四章 表单绑定(11) options绑定
    KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定
    KnockoutJS 3.X API 第四章 表单绑定(9) value绑定
  • 原文地址:https://www.cnblogs.com/jazzka702/p/2638115.html
Copyright © 2011-2022 走看看