FCKeditor使用方法详解_第1页
FCKeditor使用方法详解_第2页
FCKeditor使用方法详解_第3页
FCKeditor使用方法详解_第4页
FCKeditor使用方法详解_第5页
免费预览已结束，剩余6页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、FCKeditor使用方法技术详解作者：深蓝色QQ:76863715本文PHPChina论坛首发本文特为PHP5和MySQL5Web开发技术详角军一书编写1、概述FCKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor（如百度，阿里巴巴）。本文将通过与PHP相结合，从基本安装到高级的配置循序渐进介绍给广大PHPer。FCKeditor官方网站：http:FCKeditorWiki:2、下载FCKedi

2、tor登录FCKeditor官方站（），点击网站右上角“Download”链接。笔者编写本文时，FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。如图1所示：PCkodltor2»5BetaZIPFie(sourcecod自indudsd)：FCK0dFti>r_2.且康点击电仪,授下隼，匕包.惊可缉隹而iiu,我MnfU必唯GZipFilecodetndiided):1(keditorFCKeditor2-4.3(LatentStable)ZIPFile(sourcecodeinduded)：FC一叫叫_GZcpFile(sourcec

3、odeincluded)；>q?tJrghtlyBuildGeneratedeverynightat0;30PSTfromourv：orfl1力帛ur_d"m?Attentich：The-ibovenightlythe"underd卑口口m良nt”version&FCKeditsr,ufuMW侬匕通butnotdeeplytested.Youcanalsotestitonline.注意：当点击“FCKeditor_243.zip”链接后，将跳转到网站上自动下载。如果您当前使用Linux或Unix系统，可以点击"FCKeditor_2.4.3.tar.

4、gz”链接下载.tar.gz格式的压缩包。3、安装FCKeditor解压“FCKeditor_243.zip”文档到您的网站目录下，我们先假定您存放FCKeditor和调用脚本存于同一个目录下。目录结构如下图所示：G后退Q-印户樵F：Mb8memtRoot-Eia&cd回粕国图2：网站目录结构图fckeditor目录包含FCKeditor2.4.3程序文件。check.php用于处理表单数据。add_article.php和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。3.1、 用PHP调用FCKedi

5、tor调用FCKeditor必须先载入FCKeditor类文件。具体代码如下。<?phpinclude("fckeditor/fckeditor.php");/用于载入FCKeditor类文件?>接下来，我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。具体代码如下所示(代码一般放在表单内)。<?php$oFCKeditor=newFCKeditor('FCKeditor1');/创建FCKeditor实例$oFCKeditor->BasePath='./fckeditor/'/

6、设置FCKeditor目录地址$FCKeditor->Width='100%'设置显示宽度$FCKeditor->Height='300px'设置显示高度的高度$oFCKeditor->Create();/创建编辑器?>下面是笔者创建好的实例代码，您可将代码保存为add_article.php。<?phpinclude("fckeditor/fckeditor.php");/用于载入FCKeditor类文件?><html><head><metahttp-equiv="

7、Content-Type"content="text/html;charset=gb2312"><title>用PHP调用FCKeditor</title></head><body><formaction="check.php"method="post"name="exapmle"><?php$oFCKeditor=newFCKeditor('FCKeditor1');/创建FCKeditor实例，可创建多个实例$oF

8、CKeditor->BasePath='./fckeditor/'/设置FCKeditor目录地址$oFCKeditor->Create();/创建编辑器?><inputname="ok"type="submit"value="提交"></form></body></html>通过浏览里打开http:/you-address/add_article.php查看FCKeditor安装效果。如图3所示。I囿源代码（011123t|0电鱼富圃昌32户|翻襟：囿

9、iap3届田园一m葡Ib上u，|11=：=|»»!a|<ft4H13口-Q#*I样式格式一字体|Arial大小I屯，J叫母初始内容提交图3:FCKeditor安装成功注意：如果您想将FCKeditor创建为HTML结果代码，以便于在模板引擎里面调用（如Smarty）可使用如下代码。$output=$oFCKeditor->CreateHtml（）;现在，您可通过POST方式获得编辑器的变量值。本例将表单的action设置为check.php,您可在check.php里使用代码$fckeditorValue=$_POST'FCKeditor1'获得

10、编辑器的变量值了。FCKeditor安装成功了。但是，我们还可以通过更多设置来使FCKeditor更加灵活人性化。具体方法文本后面介绍。3.2、 用JavaScript调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件，但与PHP调用方法不同，应用下面的代码。<scripttype="text/javascript"src="./fckeditor/fckeditor.js"></script><!-载入fckeditor类一>载入FCKeditor类成功后，有三种方法创建(显示)编辑器。一

11、：内嵌方法(推荐)在您想要显示FCKeditor的地方创建如下代码(通常在表单里)：scripttype="text/javascript">varoFCKeditor=newFCKeditor('FCKeditorl');oFCKeditor.BasePath="./fckeditor/"oFCKeditor.Create();</script>下面是笔者创建好的实例代码，您可将代码保存为add_article_js.htmlo<html><head>scripttype="text/

12、javascript"src="./fckeditor/fckeditor.js"></script><!-载入fckeditor类-><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>用JavaScript调用FCKeditor</title></head><body><formaction="check.php"m

13、ethod="post"name="example">scripttype="text/javascript">varoFCKeditor=newFCKeditor('FCKeditorl');oFCKeditor.BasePath="./fckeditor/"oFCKeditor.Create();</script><inputname="ok"type="submit"value="提交"></

14、form></body></html>通过浏览里打开http:/you-address/add_article_js.html查看FCKeditor安装效果。效果和图3完全一样。同样，如果您可以使用和前面一样的方法取得编辑器的POST变量值。$fckeditorValue=$_POST'FCKeditor1'二：文本区域(TEXTAREA)方法同内嵌方法一样，也必须先载入fckeditor类。但创建(显示)编辑器同内嵌方法不同，我们需要为window.onload定义一个函数。这样，函数便可以在页面加载时执行了。函数的定义代码如下所示。script

15、type="text/javascript">window.onload=function()varoFCKeditor=newFCKeditor('MyTextarea');oFCKeditor.BasePath="./FCKeditor/"oFCKeditor.ReplaceTextarea();</script>接着，您就可以在页面中(通常在表单里)定义id为MyTextarea的文本区域(TEXTAREA)。代码如下所示：<textareaid="MyTextarea"name=&quo

16、t;MyTextarea"></textarea>下面是笔者创建好的实例代码，显示效果当然也是一样的。笔者这里就不哆嗦了。<html><head>scripttype="text/javascript"src="./fckeditor/fckeditor.js"></script><!-载入fckeditor类->scripttype="text/javascript">window.onload=function()(varoFCKeditor=

17、newFCKeditor('MyTextarea');oFCKeditor.BasePath="./fckeditor/"oFCKeditor.ReplaceTextarea();</script><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>用JavaScript调用FCKeditor</title></head><body><formacti

18、on="check.php"method="post"name="example"><textareaid="MyTextarea"name="MyTextarea"></textarea><inputname="ok"type="submit"value="提交"></form></body></html>三：适合于Ajax的调用方法同理，您同样需要加载类文

19、件。然后使用下面的代码对div元素创建(显示)编辑器。vardiv=document.getElementById("myFCKeditor");使用getElementByld方法取得myFCKeditorID元素varfck=newFCKeditor("myFCKeditor");/创建fckeditor实例div.innerHTML=fck.CreateHtml();/使用innerHTML方法，在myFCKeditordiv元素里创建编辑器和使用PHPiM用fckeditor实例一样，用javascript方法调用fckeditor实例也可以设置

20、编辑器宽度和高度等。oFCKeditor.Height=400;/400像素oFCKeditor.Height="250"/250像素oFCKeditor.Width="100%"/百分比4、FCKeditor常用设置FCKeditor已经安装成功了，也可以使用了。但是我们可以通过一些简单的设置使FCKeditor更加符合您的项目需求。设置工具栏很简单，只需打开fckeditor目录下面的fckcon巾g.js文件，按CTRL+F搜索FCKConfig.ToolbarSets"Default"代码，找到如下代码。FCKConfig.T

21、oolbarSets"Default"='Source','DocProps','-','Save','NewPage','Preview','-','Templates','Cut','Copy','Paste','PasteText','PasteWord'",'Print','SpellCheck','Undo&#

22、39;,'Redo','-','Find','Replace','-','SelectAll','RemoveFormat','Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField','/'|&#

23、39;Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscrip.'OrderedList','UnorderedList','-','Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull

24、','Link','Unlink','Anchor','Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','/','Style','FontFormat','FontName','FontSize','TextC010r','BGColo门，

25、9;FitWindow','-','About'在默认情况下，FCKeditor会调用上面定义的所有工具栏按钮。大家可以根据自己的需求进行设置。表1对上面的配置选项功能说明进行汇总。代码名称功能代码名称功能Source源代码DocProps贝囿属性-1分隔符Save保存NewPage新建Preview预览Templates模板Cut剪切Copy复制Paste粘贴PasteText粘贴为无格式文本PasteWord从MSWord粘贴Print打印SpellCheck拼写检查Undo撤消RedoMtFind查找Replace替换SelectAll全选Remo

26、veFormat清除格式Form表单Checkbox复选框Radio单选框TextField单行文本Textarea多行文本Select列表菜单Button按钮ImageButton图像域HiddenField隐藏域Bold加粗Italic倾斜Underline下划线StrikeThrough删除线Subscript下标Superscript上标OrderedList插入/删除编号列表UnorderedList插入/删除项目列表Outdent减少缩进Indent增加缩进JustifyLeft左对齐JustifyCenter居中对齐JustifyRight右对齐JustifyFull两端对齐Li

27、nk插入/编辑链接Unlink取消链接Anchor插入/编辑锚点链接Image插入编辑图像Flash插入/编辑FlashTable插入/编辑表格Rule插入水平线Smiley插入表情SpecialChar插入特殊符号PageBreak插入分页Style样式FontFormat格式FontName字体FontSize大小TextColor文本颜色BGColor背景颜色FitWindow全屏编辑About关丁Fuckeditor表1:工具栏配置选项功能进行汇总你也可以创建一个非默认的工具栏按钮设置，您可以从FCKConfig.ToolbarSets"Default"当中的代码重

28、新复制一份，然后将Default改成您想要的名字。注意：fckcon巾g.js配置选项采用JavaScript语法，如果您不懂JavaScript的话，请在配置之前进行备份。笔者这里配置了一个适合于大部份网站使用的工栏目按钮（取消了一些不常用的工具栏按钮，并重新布局）FCKConfig.ToolbarSets"MyDesign"='Cut','Copy','Paste','PasteText','PasteWord','-','Undo','Redo

29、9;,'-','Find','Replace','-','RemoveFormat','Link','Unlink','-','Image','Flash','Table','FitWindow','-','Source','/','FontFormat','FontSize','Bold','Ital

30、ic','Underline','OrderedList','UnorderedList','-','Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','TextColor'要想使用自定义的工具栏按钮，必须在创建FCKeditor实例后设置使用的工具栏选项。$oFCKeditor->ToolbarSet='MyDesign'/PHP

31、oFCKeditor.ToolbarSet="MyDesign"/JavaScript接下来，我们对常用的一些设置选项功能进行总结，读者可参考fckeditor目录下fckconfig.js文件进行阅读。见表2FCKConfig.AutoDetectLanguage自动语言检查FCKConfig.DefaultLanguage默认语百设计，建议改成zh-cnFCKConfig.ContextMenu右键菜单内容FCKConfig.ToolbarStartExpanded当页面裁入的时候，工具栏默认情况下是否FCKConfig.FontColors文字颜色列表FCKConfi

32、g.FontNames字体列表，可加入国内常用的字体，如宋体、揩体、黑体等FCKConfig.FontSizes字号列表FCKConfig.FontFormats文字格式列表FCKConfig.StylesXmlPath指定风格XML文件路径FCKConfig.TemplatesXmlPath指定模板XML文件路径FCKConfig.BodyId设置编辑器的idFCKConfig.BodyClass设置编辑器的classFCKConfig.DefaultLinkTarget设置链接默认情况下的target属性FCKConfig.BaseHref相对链接的基地址FCKConfig.SkinPat

33、h设置默认皮肤路径FCKConfig.SmileyPath表情文件路径，您口以设置此项更改表情FCKConfig.SmileyImage表情文件FCKConfig.SmileyColumns将表情分成几列显示FCKConfig.SmileyWindowWidth显示表情窗口的宽度，单位像素FCKConfig.SmileyWindowHeight显示表情窗口的高度，单位像素表2:常用设置选项功能汇总表2是笔者认为最重要的几个常选项，如果读者还需要更多选项的详细信息，可访问http:5、配置上传文件浏览功能5.1、 配置上传要使，的FCKeditor能够使用上传功能，您必须进行以下配制。注意：FC

34、Keditor不支持虚拟目录，您的路径设置都是针对网站根目录的绝对路径而言的。这点对于发布到远程网站目录的开发者极为不便，后面我们会对此进行讨论。、打开fckeditoreditorfilemanageruploadphpconfig.php,找至U代码$Config'Enabled',将值设置为true。二、接下来几行，设置$Config'UserFilesPath',设置上传路径。三、打开fckeditorfckconfig.js文件，找至U代码_FileBrowserLanguage，将值设置为php。接下来一行，把_QuickUploadLanguage

35、值也设置为php。5.2、 配置文件浏览、打开fckeditoreditorfilemanagerbrowserdefaultconnectorsphpconfig.php找到代码$Config'Enabled',将值设置为true;二、接下来几行，设置$Config'UserFilesPath',设置浏览路径。5.3、 关于上传文件浏览安全性问题为了解决FCKeditor不支持虚拟目录问题，和FCKeditor文件上传的安全性考良。我们有必要在这里单论对此进行讨论。打开fckeditoreditorfilemanageruploadphpconfig.php,

36、找至U$Config'UserFilesPath'代码，在此行代码之前定义变量$root_path=$_SERVER'PHP_SELF'重新设置$Config'UserFilesPath'变量的值，示例如下。$Config'UserFilesPath'=$root_path.'您想上传的目录名/'打开fckeditoreditorfilemanagerbrowserdefaultconnectorsphpconfig.php,找至U代码$Config'UserFilesPath',在此行代码之前定义

37、变量$root_path=$_SERVER'PHP_SELF'重新设置$Config'UserFilesPath'变量的值，示例如下。$Config'UserFilesPath'=$root_path.'您想浏览的目录名/'至此，您的FCKeditor已解决不支持虚拟目录问题。接下来，我们介绍一种技巧配置只允许管理员才可以使用FCKeditor上传问题。解决方法其实很简单，假如网站采用$_SESSION'admin_id'验证管理员的登录id,您只需将相关的脚本文件引入即可。然后使用下面的代码配置文件上传浏览开关。

38、$Config'Enabled'=isset($SESSION'adminid');6、FCKeditorApi最详细的FCKeditorApi文档默过于官方wiki提供的文档了。FCKeditorApi官方文档地址：下面提供国内某网友的翻译文档，转载地址：FCK编辑器加载后，将会注册一个全局的FCKeditorAPI对象。FCKeditorAPI对象在页面加载期间是无效的，直到页面加载完成。如果需要交互式地知道FCK编辑器已经加载完成，可使用"FCKeditor_OnComplete"函数。<scripttype="text

39、/javascript">functionFCKeditor_OnComplete(editorInstance)FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();</script>在当前页获得FCK编辑器实例：varEditor=FCKeditorAPI.GetInstance('InstanceName');从FCK编辑器的弹出窗口中获得FCK编辑器实例：varEditor=window.parent.

40、InnerDialogLoaded().FCK;从框架页面的子框架中获得其它子框架的FCK编辑器实例：varEditor=window.FrameName.FCKeditorAPI.GetInstance('InstanceName');从页面弹出窗口中获得父窗口的FCK编辑器实例：varEditor=opener.FCKeditorAPI.GetInstance('InstanceName');获彳导FCK编辑器的内容：oEditor.GetXHTML(formatted);formatted为：true|false,表示是否按HTML格式取出也可用：oEditor.GetXHTML();设置FCK编辑器的内容：oEditor.SetHTML("content",false);/第二个参数为：true|false,是否以所见即所得方式设置其内容。此方法常用于"设置初始值"或"表单重置”哦作。插入内容

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论