zoukankan      html  css  js  c++  java
  • FCKeditor使用

    FCKeditor是B/S系统开发中经常用到的HTML编辑器,功能多,也支持表情。现在最新版是2.6.2,可在它官方主页下载:http://www.fckeditor.net/download

    1、安装
    在ASP.NET系统中安装,除了要下载FCKeditor外,还要下载一个叫FCKeditor.NET的服务器控件,这两个都可以在上面的下载页面下载到。
    FCKeditor.NET压缩包解压后,找到合适的.NET版本,再添加到VS工具箱就可以用了。而FCKeditor解压后的文件还可以精简下,可以把所有以“_”下划线开头的文件和文件夹都删除,这些文件只要是一些范例,说明和源代码。
    之后只要把解压出的fckeditor整个文件夹放到系统的网站根目录中,再从VS的工具箱中把FCKeditor.NET控件拖入页面,设置其属性BasePath为./fckeditor/或~/fckeditor/,原来的默认值是/fckeditor/,设置完后就能正常使用了^^

    2、配置编辑器
    在fckeditor文件夹下有个命名为fckconfig.js的文件,这个是FCKeditor的配置文件,可以根据自己需要更改它来自定义编辑器
    ◊ 更改默认Enter键标签
    FCKeditor默认当按下Enter键时,会把之前输入的内容用<p>标签分段,假如这会影响你的页面样式的话,可通过设置更改该标签。在fckconfig.js文件中找到以下内容:
    FCKConfig.EnterMode = 'p' ;            // p | div | br
    FCKConfig.ShiftEnterMode = 'br' ;    // p | div | br
    第一行的EnterMode即是按下Enter时的标签,可更改为注释中的p或div或br,下面一行是指按住shift键,按下Enter时的标签,默认为</br>。

    ◊ 更改toolbar工具条的默认项
    FCKeditor默认有两种工具栏样式,分别为Default和Basic,可通过设置控件FCKeditor.NET的ToolbarSet属性切换。当然,通过更改配置文件,你可以自定义自己的工具条或更改默认的工具条。在fckconfig.js中找到以下内容:
    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'],
        [
    '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.
    ] ;

    FCKConfig.ToolbarSets[
    "Basic"= [
        [
    'Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
    ] ;
    第一个就是默认的Default工具条,你可以直接更改或者按照给出的样式自已写一个。

    ◊ 更改编辑区的样式
    我们看到的FCKeditor编辑区实际是一个HTML页面,所以我们可以随意更变它的样式,如字体大小,背景颜色等。在fckconfig.js可找到以下内容:
    FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
    FCKConfig.EditorAreaStyles 
    = '' ;
    第一行指定了一个外联的样式文件fck_editorarea.css,它的路径是/fckeditor/editor/css/fck_editorarea.css,找到它直接更改该文件就能改变编辑区样式。
    第二行是提供直接写css的,可像以下这样写:
    FCKConfig.EditorAreaStyles = 'body{font-size:20pt} p {margin:0px}' ;

    ◊ 更改默认表情
    在fck_config.js文件中找到以下内容:
    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 ;

    SmileyPath是表情图像的存放路径,SmileyImages是图片名集,可以在smiley目录下新建个文件夹,把表情图片放进去,再更改SmileyImages为新的表情文件名就可以了。

    ◊ 提供上传功能
    要正常使用FCKeditor的上传功能,需要更改一些配置和代码。下面以aspx系统为例说明下:
    首先需要更改配置文件,指定系统上传功能使用的编程语言。定位到下面的配置项:

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

    因为是aspx应用,所以上面两项要更改为“aspx”,默认是“php”。

    在/fckeditor/editor/filemanager/connectors目录下,有一些与各种语言上传相关的文件。打开/aspx/config.ascx用户控件,会看到两个函数。
    ·CheckAuthentication():验证是否有权限上传文件,有权限返回true,否则false
    ·SetConfig():文件上传配置
    最简单的配置方式是CheckAuthentication直接返回true,并更改SetConfig函数中的UserFilesPath变量值,UserFilesPath是文件上传后的保存路径。

    配置完成后,可通过/fckeditor/editor/filemanager/connectors/uploadtext.html文件测试上传功能是否正常。测试时假如出现错误“使用主题 css 文件要求页上有标头控件。(例如 <head runat="server" />)。,可能是网站使用到全局theme功能,可在/filemanager/connectors/aspx/upload.aspx页面加入语句“<%@ Page StylesheetTheme=""%>”去掉错误。

    ◊ 动态改变编辑区高度
    编辑区实际就是一个iframe,要改变编辑区的高度就是改变iframe的高度。查看网页源文件可以发现,编辑区iframe的ID是由FCKeditor的ID再加上“___frame”构成,可以得到以下改变高度的代码:

    var editArea = document.getElementById("FCKeditor1___frame");  //假设FCKeditor1是FCKeditor的客户端ID,只适用于IE
    editArea.style.height = '500px';  // 把高度改为500px


    ◊ 加载后自动隐藏工具条
    FCKeditor_OnComplete是在FCKeditor加载完成后自动执行的函数,函数名必须要以FCKeditor_OnComplete命名。可以在该函数中执行一些初始化工作。

    function FCKeditor_OnComplete(editorInstance)
    {
        editorInstance.Commands.GetCommand(
    'Source').Execute();  //执行“源代码”命令
        editorInstance.ToolbarSet.Collapse();  //隐藏工具栏
    }
    你也可以设置它为默认隐藏工具条,在fck_config.js文件中找到以下内容:
    FCKConfig.ToolbarStartExpanded    = true ;   // 设置工具栏默认展开/收缩
    FCKConfig.ToolbarCanCollapse    = true ;   // 设置工具栏是否可以收缩

    ◊ 扩展阅读
    FCKeditor 2.0 的设置.修改.使用
    FCKeditor Javascript API
    FCKeditor Configuration Options
    FCKeditor Developers Guide

  • 相关阅读:
    python使用pip离线安装库
    centos 6.5 ftp服务配置及客户端使用
    centos7 ntp服务器配置
    Python:如何排序(sort)
    python报OperationalError: (1366, "Incorrect string value..."的问题解决
    使用matplotlib画双纵轴坐标
    python安装PIL库
    【干货分享】前端面试知识点锦集04(Others篇)——附答案
    【干货分享】前端面试知识点锦集03(JavaScript篇)——附答案
    【干货分享】前端面试知识点锦集02(CSS篇)——附答案
  • 原文地址:https://www.cnblogs.com/vento/p/1233084.html
Copyright © 2011-2022 走看看