zoukankan      html  css  js  c++  java
  • FCKEditor使用详解

    1、版本问题:
      
    当前采用的是FCKeditor2.6.3(其实已经很老了,当前最新版本已经到3.6.1)

    2.FCKeditor下载:
      
    http://ckeditor.com/download下载,下载两个压缩文件,分别是FCKeditor_2.6.3.zip 和FCKeditor.Net 2.6.3.zip。
      
    FCKeditor_2.6.3.zip是FCKEditor的页面运行文件,FCKeditor.Net 2.6.3.zip是为ASP.NET环境制作的一个控件,其实只是需要其Bin文件夹中的一个dll文件。
    3、在ASP.NET中使用:
      
    解压下载的两个压缩包,将解压出来的fckeditor文件直接拷贝到站点的根目录下面,将.NET文件包中Bin—Debug—2.0下的dll文件拷贝到站点的Bin文件夹下,然后vs2005工具栏上面单击鼠标右键选择“选项卡……”在.NET Framework选项卡中点击“浏览”按钮选择到自己站点下面的dll文件,这样FCKeditor控件就显示在了我们的工具栏中,需要时直接将其拖至页面当中即可。
    4、配置web.config文件:

    <appSettings>
    <add key="FCKeditor:BasePath" value="~/fckeditor/"/>
    <add key="FCKeditor:UserFilesPath" value="~/Files/" />
    </appSettings> 

    5、修改fckeditor/fckconfig.js文件
    var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
    var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
    改为
    var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
    var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php 

    6、修改FCKeditor的配置文件(即fckconfig.js)自定义FCKeditor

    A.工具栏上显示的功能配置 

     FCKConfig.ToolbarSets["Default"] = [
     ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
     ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
     ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
     '/',
     ['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']  // No comma for the last row.
    ] ; 

    以上是所有FCKeditor控件上的功能,其实根据它的中文意思我们就能够猜测出它的功能,还有一种简单的方法:上面“ '/'  ”表示一个换行,而我们FCKeditor在默认设置下就是现实三行,所以可以依次对照即可,比如第一个“Source”即对应工具栏上第一个按钮“源代码”等等,以此类推……直接删去自己不想要的功能即可。

    B.字体配置:

    默认情况下FCKeditor的字体很少,而且还没有中文字体,现在来添加一些字体

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

    修改为:

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

    字体可以随便添加   

    C.配置换行键

    默认情况下在FCKeditor中按Enter是另起一段Shift+Enter是换行,现在将他们调换过来

    找到

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

    修改为

    FCKConfig.EnterMode = 'br' ;   
    FCKConfig.ShiftEnterMode = 'p' ; 
        

    D.配置表情图片

    找到

    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'] ;
    FCKConfig.SmileyColumns = 8 ;
    FCKConfig.SmileyWindowWidth  = 320 ;
    FCKConfig.SmileyWindowHeight = 210 ;

        说明:FCKConfig.SmileyPath 表示表情图片存放的路径

           FCKConfig.SmileyImages表示需要显示的表情图片名称

           FCKConfig.SmileyColumns 表示表情图片一行显示的图片个数

           后面两个一看就知道了,就是表情窗口的宽度和高度了

    默认FCKeditor的表情是很少的,我们可以找到FCKConfig.BasePath + 'images/smiley/msn/',其中FCKConfig.BasePath即是指fckeditor/editor,找到后我们可以在images/smiley下面新建一个文件夹,然后将自己的表情图片全部放入里面,然后修改一个上面的FCKConfig.SmileyPath 和FCKConfig.SmileyImages即可

    注意:如果图片过多,默认情况下FCKeditor会根据图片的多少来自动调整表情窗口的大小,而不会显示滚动条

    首先,我们来设置不然表情窗体自动调整大小在fckeditor/editor/dialog下面有一个fck_smiley.html文件,我们将其打开,找到

    window.onload = function ()
    {
     // First of all, translate the dialog box texts
     oEditor.FCKLanguageManager.TranslatePage(document) ;

     dialog.SetAutoSize( true ) ;
    }

    将dialog.SetAutoSize( true ) ;注释掉即可。

        然后我们来设置当图片在固定宽度下图片过多,显示不了,而自动显示滚动条的效果

    还是上面那个文件,找到

    <body style="overflow: hidden">

    overflow有四个值:visible    auto  hidden  scroll

    在这里将overflow的值改为auto即可,也就是根据需要而现实滚动条。

    E.语言配置

    找到下面的配置行

    FCKConfig.AutoDetectLanguage = true ;

    FCKConfig.DefaultLanguage  = 'en' ;

    将其改为(红字部分):

    FCKConfig.AutoDetectLanguage = true ;

    FCKConfig.DefaultLanguage  = 'zh-cn' ;

    即采用简体中文作为缺省语言,第一行true表示自动检测语言,它会自动按浏览器的语言设定FCKEditor自己的显示语言的,所以即使第二行缺省语言在修改前是英语,但实际显示出来的仍然是中文,因为它检测出我的浏览器是中文的。

    F.配置Tab键

    默认 Tab 键在FCKeditor中不可用,找到配置行

    FCKConfig.TabSpaces  = 0 ;

    将其修改为(红字部分):

    FCKConfig.TabSpaces  = 4 ;

    也就是改成了,按一下 Tab 键,缩进4个格,和VS2005编辑器的缩进是一样的,如果你想改成其它的值,比如3,比如5等


    7、自定义上传文件的名称

    FCKeditor对文件名的处理规则是:如果当前目录下没有重名文件,则上传后的文件名与用户PC上的文件名一致;若存在n个重名文件,则加入用户PC上的文件名是Example.xxx,上传后的文件名变为:Example(n).xxx

    我的项目里要求对用户上传的文件名变成Guid的格式,所以我对FCKeditor也做了扩展,在Web.config appSettings可以对上传后文件的格式自定义,如:

     
    <add key="FCKeditor:FilenamePattern" value="%guid.%extl"/>


    这样的文件名如:a299e63a-7d2d-493d-bbb9-99162ef5b6b8.gif

    参考:

    • %guid    代表 一个新的guid字符串
    • %fnl    代表 源文件名的小写
    • %fnu    代表 源文件名的大写
    • %extl    代表 源文件扩展名的小写
    • %extu    代表 源文件扩展名的大写

    8、配置FCkeditor的外观

    在fckconfig.js中找到FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

    有三种外观样式供选择

    分别为default   office2003   silver

    选择一种然后修改即可,如:FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

     

    9、关于图片上传提示错误的问题:

        问题一:提示This connector is disabled

    解决:

    在fckeditor/editor/filemanager/connectors/aspx目录下面有一个 config.ascx 用户控件。打开它,我们可以看到有一个:
    private bool CheckAuthentication()的方法。
    private bool CheckAuthentication()
     {
      // WARNING : DO NOT simply return "true". By doing so, you are allowing
      // "anyone" to upload and list the files in your server. You must implement
      // some kind of session validation here. Even something very simple as...
      //
      //  return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
      //
      // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
      // user logs in your system.
     
      return false;
      }
    默认是返回false的,返回true就可以了。不要轻易的返回true,要不然任何人都可以上传文件到你的服务器。可以在这里验证session的值来判断用户是否可以上传文件。
     
        问题二:FCKEditor 图片上传一直显示进度条的问题
    解决:

    很多博主介绍配置FCKeditor的目录时都是这样写的,我不知道是不是大家互相复制的关系

    <appSettings>
        <add key="FCKeditor:BasePath" value="~/FCKeditor/"/>
        <!--FCKeditor基本文件目录-->
        <add key="FCKeditor:UserFilesPath" value="/UserFiles/"/>
        <!--文件上传目录-->
      </appSettings>

    大家看一下上面两个配置有什么区别没有,"~/FCKeditor/"比"/UserFiles/"前面多了符号“~”。

    在“/UserFiles/”前面加上“~”符号就可以了。

    这个错误还会导致下面的问题:在单击浏览服务器按钮是提示:未能映射路径“/Files/image/”,具体提示如下:


    The server didn't send back a proper XML response. Please contact your system administrator.

    XML request error: Internal Server Error (500)

    Requested URL:
    http://localhost:7958/FCKeditorTest/FCKeditor/editor/filemanager/connectors/aspx/connector.aspx?Command=GetFoldersAndFiles&Type=Image&CurrentFolder=%2F&uuid=1224920141937

    Response text:
    <html>

        <head>

            <title>未能映射路径“/UserFiles/image/”。</title>

            <style>

             body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;}

             p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}

             b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}

             H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }

             H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }

             pre {font-family:"Lucida Console";font-size: .9em}

             .marker {font-weight: bold; color: black;text-decoration: none;}

             .version {color: gray;}

             .error {margin-bottom: 10px;}

             .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }

            </style>

        </head>

     …………

    10、最后来给FCKeditor减肥   

    因为FCKEditor是针对所有主流的WEB开发平台,又针对所有主要国家语言的软件,而我们现在只用它运行于中文(把英文也考虑进去吧),只运行于ASP.NET平台,所以我们把其它与此无关的内容删除。

    首先,在 ~/fckeditor 目录下,把所有以“_”符号形状的目录及文件全部删除,这样在 ~/fckeditor 下只有一个 editor 目录;

    其次,在 ~/fckeditor 目录下,只保留 fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml 这五个文件,其它一律删除。

    接着,进入 ~/fckeditor/editor 目录,删除其中的 _source 目录;

    进入 ~/fckeditor/editor/lang 目录,只留下 en.js, zh-cn.js 和 zh.js 这三个文件,其它文件全部删除,这些是工具栏语言文件,留下的三个分别是英语、简体汉字和繁体汉字。

    进入 ~/fckeditor/editor/filemanager/connectors 目录,这里有支持各个开发平台的目录,只留下 aspx 目录,其它目录一概删除,注意留下那两个文件吧。

      至此,FCKeditor的配置就完成了。

    修改fckeditor/fckconfig.js文件
    var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
    var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
    改为
    var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
    var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php 

  • 相关阅读:
    ECharts
    JSON(及其在ajax前后端交互的过程)小识
    fullpage.js全屏滚动插件使用小结
    php json_encode数据格式化
    jQuery的DOM操作实例(3)——创建节点&&编写一个弹窗
    jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
    jQuery的DOM操作实例(1)——选项卡&&Tab切换
    日常css技巧小结(2)-- inline-block带来的迷惑
    日常css技巧小结(1)--背景透明度改变对内容无影响
    浅析JavaScript事件流——冒泡
  • 原文地址:https://www.cnblogs.com/psforever/p/2126715.html
Copyright © 2011-2022 走看看