zoukankan      html  css  js  c++  java
  • [转]FCKeditor

    今天我使用了一个FCKeditor感觉二个字强大!下面是二篇还不错的文章希望对你有所帮助在文章中我加了适量的注释,请大家要注意了!
    ______________________________________________________________________________

    FCKeditor2.3.2在线编辑器非常好用,完全支持文件上传。今天baidu了一直午终于搞定了。 下载FCKeditor2.3.2,解压至FCKeditor

    :首先删除不必要的文件节省空间。凡是以_开头的文件如_samples,_testcases和一些用不到的.asp、.jsp、.cfm文件统统干掉。

    :修改fckconfig.js
     
    FCKConfig.AutoDetectLanguage = true ;//是否自动检测语言
    FCKConfig.DefaultLanguage    = 'zh-cn' ;//设置语言                        
    FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;//设置皮肤
    FCKConfig.TabSpaces = 1 ;//tab是否有效

    FCKConfig.ToolbarStartExpanded = true ;//编辑工具条是否出现,等点“展开工具栏”时才出现
    FCKConfig.FontNames    = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;//添加中文字体
     
     
    修改FCKeditor\editor\css\fck_editorarea.css
    设置默认字体及大小
    body, td
    {
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 14px;
    }
     
    :关于文件上传的设置
     
    修改fckconfig.js
    var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php 
    var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

    修改fckeditor\editor\filemanager\browser\default\connectors\php
    $Config['Enabled'] = true ;
    $Config['UserFilesPath'] = '/UserFiles/' ;//设置上传的文件夹,可自己指定
     
     
    修改fckeditor\editor\filemanager\upload\php\config.php      //这个没有找到
    $Config['Enabled'] = true ;
    $Config['UseFileType'] = true ;
    $Config['UserFilesPath'] = '/UserFiles/' ;//同上要一样   
     
     
    :引入在线编辑器时只需
    <?php
    include("fckeditor/fckeditor.php") ;
    $oFCKeditor = new FCKeditor('FCKeditor1') ;//实例化
    $oFCKeditor->BasePath = 'fckeditor/';//这个路径一定要和上面那个引入路径一致,否则会报错:找不到fckeditor.html页面
    //$oFCKeditor->Value = '' ;
    $oFCKeditor->Width = '100%' ; 
    $oFCKeditor->Height = '300' ;
    $oFCKeditor->ToolbarSet = 'Default' ; //可以自己精简toolbar
    $oFCKeditor->Create() ;//可以用$oFCKeditor->CreateHtml() 
    ?>
     
     
    JS用alert( FCKeditorAPI.GetInstance('FCKeditor1').GetXHTML( true ))得到FCKeditor1的值;
    PHP用$_POST['FCKeditor1']得到FCKeditor1的值。
    //大家可以在接收表单页面print_r($_POST)就明白了
     

    FCKeditor的详细配置说明:

    FCKeditor 2.0的主要配置文件为FCKeditor\fckconfig.js,其中几个重要的配置项目如下: 

    一.改变配置文件: 

    $oFCKeditor->Config['CustomConfigurationsPath'] = '/myconfig.js' ; 
    使用这行代码,可以将配置文件放置于FCKeditor目录之外 
    注意原来的配置文件fckconfig.js不可删除,必须仍然放置于FCKeidtor目录下。另外,改变配置之后,要清除浏览器的缓存,否则不会看到最新的页面。如果你使用的是IE,可以按Ctrl+F5强制刷新。 

    二. 工具栏的配置 

    默认情况下,FCKeditor会调用默认的工具栏按钮,FCKConfig.ToolbarSets["Default"]这个数组的每个元素对应一个工具,大家可以根据自己的需要进行增减。 

    三. 文字样式设置(Style) 

    FCKeditor所预设的样式有Image on right,Image on Left,Title,Code等等,如果你有自己常用到的特殊的格式,你可以自己来添加。需要修改的文件有: 
    fckconfig.js 
    FCKConfig.FontFormats = 
    editor/_source/classes/fcktoolbarfontformatcombo.js 
    var ōNames = 
    editor/js/fckeditorcode_ie_2.js and /editor/js/fckeditorcode_gecko_2.js 
    var ōNames= 
    editor/lang/下你选择的语言文件 
    FontFormats 

    Styles的配置文件是个XML文件,即fckstyles.xml,当然你也可以自己新建一个XML文件并指定配置文件为自己的XML文件。 
    在配置的js中,修改FCKConfig.StylesXmlPath = '../myfckstyles.xml' ; 
    <?xml version="1.0" encoding="utf-8" ?> 
    <Styles > 
    <Style name="My Image" element="img"> 
    <Attribute name="style" value="padding: 5px" /> 
    <Attribute name="border" value="2" /> 
    </Style > 
    <Style name="Italic" element="em" /> 
    <Style name="Title" element="span"> 
    <Attribute name="class" value="Title" /> 
    </Style > 
    <Style name="Title H3" element="h3" /> 
    </Styles> 

    四. 配置模板 

    模板配置可以参考fcktemplates.xml,自己定义,然后设置为默认的模板配置文件: 
    FCKConfig.TemplatesXmlPath = '/mytemplates.xml' ; 
    转自:http://www.phpchina.com/13636/viewspace_5975.html

     

     

    以下是另一篇:主要是上一篇中没有提到的配置 FCKeditor的toolbar功能按钮

    最近用php+mysql开发一个项目,里面用到了FCKeditor,下面对这个用法进行一下小结.首先说明一下我的FCKeditor版本是2.1多国语言版.
        用法:1.我的网站目录是www.里面有如下文件夹和文件
        \www
            add.php
            \include
            \FCKeditor

            2.调用FCKeditor的方法:
                (1)在开头包含include("FCKeditor/fckeditor.php")
              (2)在需要使用的的方加入
      
                  (此处basepath的路径一定要和上面include的路径一样.否则会找不到文件)
                  另外,对于这个输入内容的变量,如果要把它存入
    数据库,它的变量名为你建
                  立对象的名字.例如上面就是FCKeditor1

               <?php          
                 //大家要注意了,下面红色的那个斜杠一定要加上哦,要不程序就会无法显示编码器一开始我就上了那当,搞了半天没反应!
                  $oFCKeditor = new FCKeditor('FCKeditor1') ;//建立对象
                  $oFCKeditor->BasePath = 'FCKeditor/' ;//FCKeditor所在的位置
                  $oFCKeditor->ToolbarSet = 'Default' ;//工具按钮
                  $oFCKeditor->Create('EditorDefault', '60%',150) ;
                 ?>

             3.在FCKeditor\_samples\里面有个php调用的例子.如simples01.php
                 和sampleposteddata.php这两个.后面那个文件是输出变量名的php
                 程序,通过这个程序可以得到文本输入框内容的变量名.

             4.配置 FCKeditor的toolbar功能按钮可以很容易地进行定制,你可以依据你
                 的需要在FCKeditor的配置文件FCKeditor\fck_config.js中进行定制
                 ,一个功能按钮对应一个唯一的名称。 
                 在fck_config.js中默认情况下已经设定好三种toolbar样式:Default(包
                 含全部功能),Accessibility和Basic。 
    让我们先来看看toolbar样式的定制格式: 
    config.ToolbarSets["ToolBarSetName"] = [ // Toolbar名 
    ['Item 1','Item 2','-','Item 3','Item n'], // Toolbar第一行 
    ['Item 4','-','Item 5','Item 6','Item n'] // Toolbar第二行 
    ] ; 
    这里'-'的作用是创建一个分割条。 
    FCKeditor1.6为我们提供了60个编辑功能,具体功能如下:
    //有可能是版本问题,下面有些不使用时,去弹出js的警告对话框说工具不存在!
          默认的Default包含了FCKeditor的全部功能,个人感觉有些功能用不上,完全加载还会影响显示速度,所以我简化了一下,只加载了一些常用的功能: 
    1、打开FCKeditor\fck_config.js文件,添加如下代码

    功能名称
    含义
    功能名称
    含义
    EditSource
    显示HTML源代码
    StrikeThrough
    删除线
    Save
    保存
    Subscrīpt
    下标
    NewPage
    新建空白页面
    Superscrīpt
    上标
    Preview
    预览
    JustifyLeft
    左对齐
    Cut
    剪切
    JustifyCenter
    居中对齐
    Copy
    复制
    JustifyRight
    右对齐
    Paste
    粘贴
    JustifyFull
    两端对齐
    PasteText
    纯文本粘贴
    InsertOrderedList
    自动编号
    PasteWord
    来自Word的粘贴
    InsertUnorderedList
    项目符号
    Print
    打印
    Outdent
    减少缩进
    SpellCheck
    拼写检查
    Indent
    增加缩进
    Find
    查找
    ShowTableBorders
    显示表格线
    Replace
    替换
    ShowDetails
    显示明细
    Undo
    撤销
    Form
    添加Form动作
    Redo
    还原
    Checkbox
    复选框
    SelectAll
    全选
    Radio
    单选按钮
    RemoveFormat
    去除格式
    Input
    单行文本框
    Link
    插入/编辑 链接
    Textarea
    滚动文本框
    RemoveLink
    去除连接
    Select
    下拉菜单
    Anchor
    锚点
    Button
    按钮
    Image
    插入/编辑 图片
    ImageButton
    图片按钮
    Table
    插入/编辑 表格
    Hidden
    隐藏
    Rule
    插入水平线
    Zoom
    显示比例
    SpecialChar
    插入特殊字符
    FontStyleAdv
    系统字体
    UniversalKey
    软键盘
    FontStyle
    字体样式
    Smiley
    插入表情符号
    FontFormat
    字体格式
    About
    关于
    Font
    字体
    Bold
    粗体
    FontSize
    字体大小
    Italic
    斜体
    TextColor
    文字颜色
    Underline
    下划线
    BGColor
    背景色

     

    config.ToolbarSets["www"] = [ 
    ['EditSource','Save','NewPage','Preview','-','Cut','Copy','Paste','PasteText','-','Find','Replace','-','Undo','Redo','-','SelectAll','-','Link','RemoveLink','-','Image','Table','Rule','SpecialChar','Smiley'] , 
    ['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','InsertOrderedList','InsertUnorderedList','-','Form','Checkbox','Radio','Input','Textarea','Select','Button','-','FontStyleAdv','TextColor'] ] ;

    因为版权的原因,工具的名字有可能发生改变:

    FCKeditor_2.4.3的设置:

    FCKConfig.ToolbarSets["www"] = [
    ['Source','Save','NewPage','Preview','-','Cut','Copy','Paste','PasteText','-','Find','Replace','-','Undo','Redo','-','SelectAll','-','Link','Unlink','-','Image','Table','Rule','SpecialChar','Smiley'] , 
        ['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','OrderedList','UnorderedList','-','Form','Checkbox','Radio','TextField','Textarea','Select','Button','-','Style','TextColor']
    ] ;


        这样加载的速度就快多了。
        使用时只需把$oFCKeditor->ToolbarSet = 'Default' 
        改为$oFCKeditor->ToolbarSet = 'www' 即可
               

    最后.我们把FCKeditor目录下所有以下划线“_”开头的目录都删掉以节省空间,如_test._samples,等等.完工

  • 相关阅读:
    找回Android studio的帮助文档
    adb shell 命令详解
    Android 获取Activity当前view
    下载网络文件HttpURLConnection.getContentLength()大小为 0
    Android设置屏幕旋转后保存数据
    解决TextView drawableRight左侧图片大小不可控的问题
    Android全屏(包含3种隐藏顶部状态栏及标题栏和一种隐藏Android 4.0平板底部状态栏的方法)
    人生苦短,我用Python(目录)
    爬虫学习目录
    Django-jet自定义菜单
  • 原文地址:https://www.cnblogs.com/JamyWong/p/1767583.html
Copyright © 2011-2022 走看看