`
talentvictor
  • 浏览: 32322 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ckeditor配置

    博客分类:
  • js
阅读更多
FCKeidtor是个国外的多语言编辑器,你可以对其配置文件进行简单修改使之支持目前常用Web开发语言的应用,下面我就讲讲FCKeditor的最新版本2.4.2在php的具体配置过程,有不足和出错的地方,欢迎指正。

精简:
正因为这个编辑器是支持多语言的,所以首先我们针对使用对其做相应的冗余文件删除。

1、临时文件及文件夹删除:从根目录下开始删除一切以“_”开头的文件及文件夹,因为他们为临时文件和文件夹。删除这类临时文件及文件夹之后,我们还要删除一些根目录下的多余文件,根目录下我们只保留fckconfig.js(配置文件)、fckeditor.js(js方式调用文件)、fckeditor.php(php方式调用文件,新版本通过该文件统一调用php4或者php5的调用文件,fckeditor_php4.php/fckeditor_php5.php你可以根据自己服务器使用的情况删减,建议都保留)、fckeditor_php4.php(php4的调用文件)、fckeditor_php5.php(php5的调用文件)、fckstyles.xml(样式)、fcktemplates.xml(模板)文件和editor文件夹。

2、editor\lang目录:存放的是多语言配置文件,因为我们只可能用到en和zh-cn(简体中文)所以,根据我的选择,我删掉其他的语言配置文件。

3、editor\skins界面目录:默认带有三个界面(default:默认界面,加载速度相对较快;office2003:相对pp的界面,不过速度确实要慢些;silver:银白色界面,加载速度也相对较快),可以自行决定是否删除其中一两个。

4、editor\filemanager\browser\default\connectors目录:存放编辑器所支持的Web动态语言,我们以php为例所以保留php目录,test.html文件可以帮助你查看某语言下的上传设置等(具体上传设置我将在后面的配置作较为详细讲解),可以自行决定是否删除。

5、editor\filemanager\upload目录:同理。

到此精简完成,你会发现整个编辑器确实“瘦身”不少,呵呵

基本配置:

下面我开始对编辑器进行简单配置(并非每步都必须,可根据自己的需要参考修改):

1、默认语言
打开fckconfig.js文件(注意此文件是utf-8编码哦),找到FCKConfig.AutoDetectLanguage = true ;(第56行)此句作用为自动检测语言,默认为true,即表示编辑器会根据系统语言自动检测加载相应的语言,我们将其改为false,不让其检测,然后将FCKConfig.DefaultLanguage = ‘en’;(编辑器默认语言,第57行)改为简体中文”zh-cn”。

2、字体列表
依然打开fckconfig.js,因为此编辑器为外国人编写,所以默认不提供中文字体,我们为其加入,找到FCKConfig.FontNames(第142行)加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其他字体可根据自己需要自行加入。

3、文件上传
FCKeditor的文件管理程序在editor/filemanager/文件夹下,分为浏览(browser)和上传(upload)两种。“浏览”是指浏览服务器已存在文件并可以选择,也可以上传本地文件至服务器;上传是指快速上传,在窗口中点“上传”选项,选择本地文件后上传就行,但是不能查看服务器上已有上传文件,相对而言不太方便,只是操作更为快捷。也就是说FCKeditor中有一个文件浏览,有两个文件上传,而这些设置是分散在多个文件中,配置相对复杂,下面我大致讲一下:
在FCKeditor中共有三个文件跟上传功能有关,一个是js文件,两个是php文件,前者关闭后界面中不出现相关窗口或按钮,后者关闭后相关功能不可用。
js文件即是指的fckconfig.js文件,在以前旧版本的fckconfig.js中首先你必需开启如下几项:

浏览上传功能:

CODE: [Copy to clipboard]


--------------------------------------------------------------------------------

FCKConfig.LinkBrowser = true ; //文件
FCKConfig.ImageBrowser = true ; //图片
FCKConfig.FlashBrowser = true ; //Flash
快速上传功能:

CODE: [Copy to clipboard]


--------------------------------------------------------------------------------

FCKConfig.LinkUpload = true ; //同上
FCKConfig.ImageUpload = true ; //同上
FCKConfig.FlashUpload = true ; //同上
即把这几项设为true,而我们今天使用的2.4.2的fckconfig.js中默认已经是开启上传开关显示功能的,所以,如果你要将该编辑器作为前台使用(fckeditor上传漏洞问题一直没有得到较好的改善),考虑到安全性你可能需要关闭文件上传功能,那么你只需要将这几项设置为false即可(当然两个php文件你也不要开启上传功能哦)。

如果你要使用文件上传功能,那么我们继续配置:
依然在fckconfig.js文件中,fckeditor对语言默认支持的是asp,找到以下两句,进行相应修改:

var _FileBrowserLanguage?? ???? ??????= ‘asp’ ;?? ???? ??????// asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage?? ???? ??????= ‘asp’ ;?? ???? ??????// asp | aspx | cfm | lasso | php(第183行)
我们将其均改为’php’:

var _FileBrowserLanguage?? ???? ??????= ‘php’ ;?? ???? ??????// asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage?? ???? ??????= ‘php’ ;?? ???? ??????// asp | aspx | cfm | lasso | php
在2.4.2版本中,我们发现增加了对更多文件后缀名的支持,这个应该是为了解决上传漏洞所作的些许改动,不过作用不大,呵呵
*.AllowedExtensions:(其中*号代表:FCKConfig.LinkUpload、FCKConfig.ImageUpload等)表示允许上传的文件后缀名,为空表示允许所有文件,你可根据自己需要设置上传文件后缀名,一定程度增加安全性,设置的格式可以参考它已有的后缀名设置。
*.DeniedExtensions:同上,表示禁止上传的文件后缀名。

注:你设置了允许上传的,当然禁止的也就不必要设置了,本人推荐设置允许的,毕竟禁止的后缀名列表不能罗列完全,可能还有很多我们不曾想到的后缀名。

对js文件的配置到此已经完成,下面我们进行两个php文件在上传方面的设置:

文件浏览上传修改:
打开editor\filemanager\browser\default\connectors\php\config.php文件,找到:
$Config['Enabled'] = false ;(第28行)将false改为true,即允许上传。
$Config['UserFilesPath'] = ‘/userfiles/’ ;(第32行)为定义上传目录,可根据自己情况进行修改,我将其改为upload目录。

注:注意FCKeditor是不支持虚拟目录的,你的所有路径都是针对网站根目录的绝对路径。

文件快速上传修改:
打开文件editor\filemanager\upload\php\config.php文件,找到
$Config['Enabled'] = false ;(第28行)将false改为true。
$Config['UserFilesPath'] = ‘/UserFiles/’ ;(第35行)同“文件浏览上传”的上传目录。
$Config['UseFileType'] = false ; (第32行)改为true,不然上传文件不会放在上传目录中
在该文件中,还有一项:
$Config['UserFilesAbsolutePath'] = ” ;(第41行)
这项的作用是设定上传的绝对路径,比如,你想指定上传文件到D:/Web/upload/下,你可以指定它的值为你的绝对路径,注意,如果你指定了该值,那你也要对$Config['UserFilesPath'] = ‘/UserFiles/’ ;作相同的设置。

到此上传基本配置已经完成,整个编辑器最基本的配置也已经结束了,你可以通过下列代码对其进行调用测试了:

CODE:


--------------------------------------------------------------------------------

<?php
include(“/fckeditor/fckeditor.php”);?? ???? ??????// 包含fckeditor类,fckeditor目录放在网站根目录下
$BasePath = “/fckeditor/”;?? ???? ???? ???? ??// 编辑器路径
$oFCKeditor = new FCKeditor(‘jayliao’);?? ?? // 创建一个fckeditor对象,表单的名称为jayliao
$oFCKeditor->BasePath????= $BasePath;
$oFCKeditor->Value????= ‘test’;?? ???? ??????// 设置表单初始值

// 还可设置以下部分(“=”包含部分),并非必须:
//==================================================================================//
$oFCKeditor->Width = ’100%’;?? ???? ???? ???? ??// 编辑器宽度,类中有默认值,如果不想修改可不管此项
$oFCKeditor->Height= ’300′;?? ???? ???? ???? ??// 同width,此处为高$oFCKeditor->ToolbarSet
$oFCKeditor->ToolbarSet = ‘JayLiao’;?? ???? ??????// 默认编辑器工具栏有Basic(基本工具)和Default(所有工具)两种选择,JayLiao为本人自定义的工具条,如有需要可参考后文中的说明新建或修改工具条
$oFCKeditor->Config['SkinPath'] = ‘/fckeditor/editor/skins/office2003/’;?? ???? ??????// 设置编辑器皮肤
//==================================================================================//

$oFCKeditor->Create();?? ???? ???? ???? ??// 调用类中方法,必须
?>

赶紧测试一下吧,是不是很激动,终于可以看到这个强大的编辑器了,呵呵。不过,马上你会发现在上传以中文命名的文件时会出现乱码,这到底是怎么回事呢?呵呵,不怕,下面我们就对其进行简单修改问题很快就解决的:

分享到:
评论

相关推荐

    ckeditor配置(详细)

    ### CKEditor配置详解 CKEditor是一款广泛应用于网页开发中的富文本编辑器,它提供了丰富的文本编辑功能,如格式化文本、插入图片、链接等,极大地提升了用户在网页上的编辑体验。本文将深入解析CKEditor的配置方法...

    ckeditor配置上传视频

    最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...

    CKEDITOR配置

    ### CKEDITOR配置详解 #### 一、CKEDITOR简介与配置要点 CKEDITOR是一款非常流行的开源富文本编辑器,被广泛应用于各种网站项目中。本文将详细介绍CKEDITOR的基础配置方法及高级功能设置,包括表情配置、图片配置...

    CKSource研究之CKFinder、CKEditor配置

    在"CKFinder、CKEditor配置"中,可能涵盖了如何自定义编辑器的界面、设置默认样式、禁用或启用某些工具栏按钮,以及如何在编辑器中集成CKFinder,使得用户能直接在编辑过程中访问和插入服务器上的资源。 配置...

    ckeditor配置[参考].pdf

    以下是对 CKEditor 配置的详细说明: 1. **引入 CKEditor**: 在 HTML 页面的 `&lt;head&gt;` 标签内,你需要引入 CKEditor 的核心 JavaScript 文件 `ckeditor.js`。这通常是这样的: ```html ...

    ckeditor配置文件

    ckeditor 配配置文件

    ckEditor配置demo

    在这个"ckEditor配置demo"中,我们将深入探讨如何配置CKEditor,特别是其图片上传功能和插入高亮代码片段的设置。 首先,我们需要了解CKEditor的基本配置。在使用CKEditor时,通常需要通过JavaScript API或配置文件...

    ckeditor配置说明

    ### ckeditor配置说明 在网页开发中,使用富文本编辑器可以极大提升用户在填写表单时的体验,其中ckEditor是一款非常受欢迎的选择。本文档将详细介绍如何在项目中配置和使用ckEditor,并且根据其版本的变化进行相应...

    CKEditor配置好的MyEclipse实例

    在MyEclipse这样的集成开发环境中配置CKEditor,可以方便地在Java Web项目中集成编辑器,提升用户界面的编辑体验。下面我们将深入探讨CKEditor及其在MyEclipse中的配置过程。 首先,我们需要了解CKEditor的基本结构...

    ckeditor配置与应用

    本知识点将详细介绍CKEditor的配置与应用,以及如何根据自身需求进行定制。 首先,CKEditor的完整代码通常包含了所有功能模块,包括图片上传、链接管理、多媒体插入、表格编辑等,适用于需要全面功能的场景。这些...

    CKeditor配置使用[参照].pdf

    在本文中,我们将深入探讨如何配置和使用CKeditor,以及它的一些关键配置参数。 首先,要使用CKeditor,你需要从其官方网站[http://ckeditor.com/](http://ckeditor.com/)下载所需版本。在这个例子中,我们使用的是...

    CKEditor配置

    在压缩包中的`CKFditor配置.docx`可能是CKEditor的具体配置指南或示例,而`CKEditor`可能是一个解压后的CKEditor文件夹,包含了编辑器的源代码和其他资源。阅读这个文档和研究源代码可以帮助你更深入地理解和定制...

    CKeditor 配置使用

    ### CKeditor 配置使用详解 #### 一、CKeditor简介 CKeditor是一款非常流行的开源富文本编辑器,广泛应用于各种Web应用中。它能够提供强大的编辑功能,并且支持多种自定义配置,使得开发者可以根据实际需求调整编辑...

    ckeditor4.2.2自定义配置

    自定义CKEditor配置主要通过修改`config.js`文件来实现。这个文件通常位于CKEditor的根目录下,用于定义编辑器的各种设置,如工具栏按钮、语言、默认样式等。例如,如果你想禁用某些默认的工具栏按钮,可以在`...

    CKeditor 配置好的,支持QQ表情以及去掉多余功能

    在这个配置好的版本中,CKeditor 特别优化了对QQ表情的支持,同时也考虑了用户体验,去除了不常用的功能按钮,还增加了插入代码插件,非常适合编程或技术类内容的编写。 首先,关于QQ表情的支持:CKeditor 集成了QQ...

    ckfinder+ckeditor 配置好的文件

    配置CKEditor与CKFinder的步骤如下: 1. 将"ckeditor"目录放置在服务器的公共可访问目录下,以便在网页中引用。 2. 同样,将"ckfinder"目录也放在公共可访问目录,确保CKFinder的资源可以被CKEditor调用。 3. 在"ck...

Global site tag (gtag.js) - Google Analytics