FCKEDITOR_API使用详解

合集下载

PHP实例:FCKeditor 的配置和使用方法

PHP实例:FCKeditor 的配置和使用方法

〇、假设网站的目录为:以下为引用的内容:\website_root\index.php\FCKeditor一、调用FCKeditor 的两种方法1、通过创建实例来调用在index.php 文件中,调用它的代码,把下面的代码加在需要编辑器的地方:以下为引用的内容:<Form name="frm1"><?php//引用FCKeditor.php这个文件,基本的类和数据结构都在这里include_once("FCKeditor/fckeditor.php");//创建FCKeditor对象的实例。

myFCKeditor即提交后,接收数据页面_POST['myFCKeditor']使用FCKeditor=new FCKeditor('myFCKeditor');//FCKeditor所在的位置,这里它的位置就是'FCKeditor' 文件夹FCKeditor->BasePath='./FCKeditor/';//工具按钮设置FCkeditor->ToolbarSet='Default';//设置它的宽度FCKeditor->Width='100%';//设置它的高度FCKeditor->Height='300px';//生成FCkeditor->Create();?></Form>2、通过IFRAME 调用以下为引用的内容:<Form name="frm1"><INPUT name="myFCKeditor" id="myFCKeditor" style="DISPLAY: none" type=hidden><INPUT id="myFCKeditor___Config" style="DISPLAY: none" type=hidden><IFRAME id="myFCKeditor___Frame" src="FCKeditor/editor/fckeditor.html?InstanceName=myFCKeditor&amp;Toolbar=Default" frameBorder=0 width=100% scrolling=no height=300></IFRAME></Form>注意:name="myFCKeditor" 和IFRAME 中InstanceName=myFCKeditor 的“myFCKeditor”必须相同。

FckEditor配置手册中文教程详细说明

FckEditor配置手册中文教程详细说明

FckEditor配置⼿册中⽂教程详细说明⽐如CUTEEDITOR,虽然功能⽐FCKEDITOR还要强⼤,可是,它本⾝也够庞⼤了,⾄于FREETEXTBOX等,其易⽤性与FCKEDITOR相⽐,尚有差距,可以说,FCKEDITOR是⼀个别具匠⼼的在线编辑器,它⾥⾯融⼊了作者⾼深的⾯向对象的JAVASCRIPT功⼒,集易⽤性与强⼤的功能与⼀体..与编辑器相关的所有图像,脚本以及调⽤页.语⾔⽂件.编辑器的⽪肤⽂件.⼯具样的贴图等这些将导致在服务器和客户端间产⽣相当的流量.如果有许多⽂件被调⽤,那么即便每个⽂件很⼩.也会让⽤户等得不耐烦.装载顺序从2.0版开始,编辑器按以下步骤装载资源:.基本页(就是编辑器所在页)以及装⼊编辑器的JS脚本.⽤来建⽴编辑器的脚本.编辑器的语⾔和⽪肤..建⽴编辑器..载⼊预置的编辑⽂档内容..从现在开始,⽤户可以阅读和编辑⽂档了,不过,拖拽⽀持以及⼯具栏都是不可⽤的.载⼊编辑器引擎脚本.建⽴⼯具栏,并且可⽤.从现在开始,编辑器的所有功能都已经完整.载⼊⼯具栏图标脚本压缩在打包任何新版本时,编辑器的JS脚本将会进⾏预处理.预处理步骤如下:.移除所有代码注释.移除所有⽆⽤的空⽩字符..将脚本合并成⼏个⽂件使⽤上⾯的⽅法,我们可以将脚本⽂件的⼤⼩压缩到原来的50%.压缩后,原始的代码仍然存在于⼀个名为_Source的⽂件夹中如何打包?编辑器已经⾃带了打包程序,它位于FCKEDITOR的根⽂件夹中_PACKAGER⽂件夹中,名为Fckeditor.Packager.exe,将其复制到FCKEDITOR根⽂件夹中并运⾏,即可⾃动将JS脚本打包并压缩需要注意的是该程序是⼀个.NET程序,必须安装.NET FRAMEWORK才能使⽤想要获取⽀持?如果你捐赠15000欧元,你就可以获得1年的免费技术⽀持(⽐较贵的说,相当于⼈民币15万,不过西欧的费⽤相当惊⼈)如何安装?1.下载最新版的FCKEDITOR2.解压缩到你的站点根⽂件夹中名为FCKEDITOR的⽂件夹中(名称必须为FCKEDITOR,因为配置⽂件中已经使⽤此名称来标⽰出FCKEDITOR的位置)3.现在,编辑器就可以使⽤了,如果想要查看演⽰,可以按下⾯⽅法访问:http://<your-site>/FCKeditor/_samples/default.html注意:你可以将FCKEDITOR放置到任何⽂件夹,默认情况下,将其放⼊到FCKEDITOR⽂件夹是最为简单的⽅法.如果你放⼊的⽂件夹使⽤别的名称,请修改配置⽂件夹中编辑器BasePath参数,如下所⽰:oFckeditor.BasePath="/Components/fckeditor/";另外,FCKEDITOR⽂件夹中所有以下划线开头的⽂件夹及⽂件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运⾏时必需的如何将FCKEDITOR整合进我的页⾯?由于⽬前的版本提供的FCKEDITOR仅提供了JAVASCRIPT式的整合,因此,这⾥仅讲述如何应⽤JAVASCRIPT来整合FCKEDITOR到站点中,当然,其他各种语⾔的整合,你可以参考_samples⽂件夹中的例⼦来完成1,假如编辑器已经安装在你的站点的/FCKEDITOR/⽂件夹下.那么,第⼀步我们需要做的就是在页⾯的HEAD段中放⼊SCRIPT 标记以引⼊JAVASCRIPT整合模块.例如:<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>其中路径是可更改的2,现在,FCKEDITOR类已经可以使⽤了.有两个⽅法在页⾯中建⽴⼀个FCKEDITOR编辑器:⽅法1:内联⽅式(建议使⽤):在页⾯的FORM标记内需要插⼊编辑器的地⽅置⼊以下代码:script type="text/javascript">var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;oFCKeditor.Create() ;</script>⽅法2:TEXTAREA标记替换法(不建议使⽤):在页⾯的ONLOAD事件中,添加以下代码以替换⼀个已经存在的TEXTAREA标记<html><head><script type="text/javascript">window.onload = function(){var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;oFCKeditor.ReplaceTextarea() ;}</script></head><body><textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea></body></html>3.现在,编辑器可以使⽤了FCKEDITOR类参考:下⾯是⽤来在页⾯中建⽴编辑器的FCKEDITOR类的说明构造器:FCKeditor( instanceName[, width, height, toolbarSet, value] )instanceName:编辑器的唯⼀名称(相当于ID)WIDTH:宽度HEIGHT:⾼度toolbarSet:⼯具条集合的名称value:编辑器初始化内容属性:instanceName:编辑器实例名width:宽度,默认值为100%height:⾼度,默认值是200ToolbarSet:⼯具集名称,参考FCKCONFIG.JS,默认值是Defaultvalue:初始化编辑器的HTML代码,默认值为空BasePath:编辑器的基路径,默认为/Fckeditor/⽂件夹,注意,尽量不要使⽤相对路径.最好能⽤相对于站点根路径的表⽰⽅法,要以/结尾CheckBrowser:是否在显⽰编辑器前检查浏览器兼容性,默认为trueDisplayErrors:是否显⽰提⽰错误,默为true;集合:Config[Key]=value;这个集合⽤于更改配置中某⼀项的值,如oFckeditor.Config["DefaultLanguage"]="pt-br";⽅法:Create()建⽴并输出编辑器RepaceTextArea(TextAreaName)⽤编辑器来替换对应的⽂本框如何配置FCKEDITOR?FCKEDITOR提供了⼀套⽤于定制其外观,特性及⾏为的设置集.主配置⽂件名为Fckconfig.js你既可以编辑主配置⽂件,也可以⾃⼰定义单独的配置⽂件.配置⽂件使⽤JAVASCRIPT语法.修改后,在建⽴编辑器时,可以使⽤以下语法:var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;oFCKeditor.Create() ;提醒:当你修改配置后,请清空浏览器缓存以查看效果配置选项:AutoDetectLanguage=true/false ⾃动检测语⾔BaseHref="" _fcksavedurl="""" 相对链接的基地址ContentLangDirection="ltr/rtl" 默认⽂字⽅向ContextMenu=字符串数组,右键菜单的内容CustomConfigurationsPath="" ⾃定义配置⽂件路径和名称Debug=true/false 是否开启调试功能,这样,当调⽤FCKDebug.Output()时,会在调试窗中输出内容DefaultLanguage="" 缺省语⾔EditorAreaCss="" 编辑区的样式表⽂件EnableSourceXHTML=true/false 为TRUE时,当由可视化界⾯切换到代码页时,把HTML处理成XHTMLEnableXHTML=true/false 是否允许使⽤XHTML取代HTMLFillEmptyBlocks=true/false 使⽤这个功能,可以将空的块级元素⽤空格来替代FontColors="" 设置显⽰颜⾊拾取器时⽂字颜⾊列表FontFormats="" 设置显⽰在⽂字格式列表中的命名FontNames="" 字体列表中的字体名FontSizes="" 字体⼤⼩中的字号列表ForcePasteAsPlainText=true/false 强制粘贴为纯⽂本ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体FormatIndentator="" 当在源码格式下缩进代码使⽤的字符FormatOutput=true/false 当输出内容时是否⾃动格式化代码FormatSource=true/false 在切换到代码视图时是否⾃动格式化代码FullPage=true/false 是否允许编辑整个HTML⽂件,还是仅允许编辑BODY间的内容GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记IeSpellDownloadUrl=""下载拼写检查器的⽹址ImageBrowser=true/false 是否允许浏览服务器功能ImageBrowserURL="" 浏览服务器时运⾏的URLImageBrowserWindowHeight="" 图像浏览器窗⼝⾼度ImageBrowserWindowWidth="" 图像浏览器窗⼝宽度LinkBrowser=true/false 是否允许在插⼊链接时浏览服务器LinkBrowserURL="" 插⼊链接时浏览服务器的URLLinkBrowserWindowHeight=""链接⽬标浏览器窗⼝⾼度LinkBrowserWindowWidth=""链接⽬标浏览器窗⼝宽度Plugins=object 注册插件PluginsPath="" 插件⽂件夹ShowBorders=true/false 合并边框SkinPath="" ⽪肤⽂件夹位置SmileyColumns=12 图符窗列数SmileyImages=字符数组图符窗中图⽚⽂件名数组SmileyPath="" 图符⽂件夹路径SmileyWindowHeight 图符窗⼝⾼度SmileyWindowWidth 图符窗⼝宽度SpellChecker="ieSpell/Spellerpages" 设置拼写检查器StartupFocus=true/false 开启时FOCUS到编辑器StylesXmlPath="" 设置定义CSS样式列表的XML⽂件的位置TabSpaces=4 TAB键产⽣的空格字符数ToolBarCanCollapse=true/false 是否允许展开/折叠⼯具栏ToolbarSets=object 允许使⽤TOOLBAR集合ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开UseBROnCarriageReturn=true/false 当回车时是产⽣BR标记还是P或者DIV标记如何⾃定义样式列表呢?FCKEDITOR的样式⼯具栏中提供了预定义的样式,样式是通过XML⽂件定义的,默认的XML样式⽂件存在于FCkEditor根⽂件夹下的FckStyls.xml⽂件中这个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>每⼀个STYLE标记定义⼀种样式,NAME是显⽰在下拉列表中的样式名,ELEMENT属性指定此样式所适⽤的对象,因为FCKEDITOR中的样式是上下⽂敏感的,也就是说,选择不同的对象,仅会显⽰针对这类对象定义的样式拼写检查FCKEDITOR 带了两种拼写检查⼯具,⼀种是ieSpell,默认情况下使⽤这种,使⽤这种⽅式的拼写检查,要求客户下载并安装iespell这个⼩软件,另外,也提供 SpellPager的⽅式来进⾏拼写检查,不过,由于SPELLPAGER是由PHP编写的服务器端脚本,因此,要求你的WEB服务器必须⽀持PHP脚本语⾔⽅可更改拼写检查器的⽅式请参见有关配置⽂件的详细说明压缩脚本为了提供脚本载⼊的效率,FCKEDITOR采⽤以下⽅法对脚本尽量压缩以减少脚本尺⼨:1,移除掉脚本中的注释2.移除掉脚本中所有⽆意义的空⽩另外,FCKEDITOR还提供了⼀个专门⽤于压缩脚本的⼯具以便你在发布时能减⼩⽂件尺⼨,你可以将_Packager⽂件夹中的Fckeditor.Packager.exe复制到FCKEDITOR根⽂件夹来运⾏并压缩脚本本地化FCKEDITOR如果FCKEDITOR没有提供您所需要的语⾔(实际上全有了),你也可以⾃⾏制作新的语⾔,你只需要复制出EN.JS,然后在其基础上进⾏翻译.另外,语⾔名称与对应的脚本⽂件名必须遵循RFC 3066标准,但是,需要⼩写,例如:Portuguess Language对应的脚本⽂件名必须为pt.js如果需要针对某个国家的某种语系,则可以在语系缩写后加上横线及国家缩写即可在使⽤时,系统会⾃动侦测客户端语系及国别⽽运⽤适当的界⾯语⾔.当建⽴⼀种新的语⾔后,你必须在"Edit/lang/fcklanguagemanager.js"中为其建⽴⼀个条⽬,如下所⽰: FCKLanguageManager.AvailableLanguages ={en : 'English',pt : 'Portuguese'}需要提醒的是,⽂件必须保存为UTF-8格式如何与服务器端脚本进⾏交互?请查看例⼦以得到相关内容另外,在中以以下步骤使⽤1.把FCKEDITOR添中到⼯具箱2.托拽FCKEDITOR控件到页⾯3.为其指定名称4.FCKEDITOR 类的所有属性不光可以在代码中使⽤,⽽且可以作为FCKEDITOR控件的属性直接使⽤,例如,要改变⽪肤,可以在UI页⾯中指定 SkinPath="/fckeditor/editor/skins/office2003"即可,其实FCKEDITOR的版本可以做得更好,你可以找到FCKEDITOR 2.1的源⽂件,然后修改该控件的设计,为其暴露更多有⽤的属性,重新编译即可5,POSTBACK后的数据,使⽤FCKEDITOR控件的value属性获得6. 由于默认状态下,不允许提交含有HTML及JAVASCRIPT的内容,因此,你必须将使⽤FCKEDITOR的页⾯的ValidateRequest设为false.(<%@page validteRequest="false" %>即可)附:⼀、如何设置上传⽂件语⾔把FCKeditor根⽬录下⾯的fckconfig.js⽂件⾥var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php这两⾏中改成您所需要调⽤的编辑器语⾔,如⽤则改为aspx;⼆、解决中⽂的问题:在web.config中加⼊:<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>这样设置后可以显⽰中⽂的⽂件,但URL地址也是中⽂的;如果服务器对中⽂地址的解析不好,可能导致图⽚⽆法浏览;所以修改:editor\filemanager\browser\default\frmresourceslist.html中的OpenFile函数,把window.top.opener.SetUrl( fileUrl ) ;修改为:window.top.opener.SetUrl( escape(fileUrl) ) ;三.设置上传的⽬录:1:在web.config中设置:<appSettings><add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" /></appSettings>2:在Session中设置:在editor\filemanager\browser\default\connectors\aspx\connector.aspx中加⼊以下代码:<script runat="server" language="C#">protected override void OnInit(EventArgs e){Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";}</script>如何在中动态设置上传图⽚的路径?1.在javascript中修改FCKConfig.ImageBrowserURL的值,修改⽅式如下:FCKConfig.ImageBrowserURL += "?Path=要上传的⽂件路径";如:要把⽂件上传到站点根⽬录的UploadFile⽂件夹中,则设置为:FCKConfig.ImageBrowserURL += "?Path=/UploadFile";2.在"editor\filemanager\browser\default\connectors\aspx\connector.aspx"⽂件最后中增加以下程序:<script runat="server" language="C#">protected override void OnInit(EventArgs e){if( Request.QueryString["Path"]==null ){Session["FCKeditor:UserFilesPath"] = "/UpLoadFiles/"; //设置默认值}else{Session["FCKeditor:UserFilesPath"] = Request.QueryString["Path"];}}</script>--------------------------------------------------------------------------------多环境下的配置和使⽤技巧--------------------------------------------------------------------------------在fckeditor中添加右键菜单现在⽹上介绍FCKEditor如何配置,如何精简的例⼦⾮常之多,如有需要可以google⼀下,此处不必赘述。

FCKeditor(JAVA版)配置详解

FCKeditor(JAVA版)配置详解
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>调试时设为true
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
---images(editor使用到的图片)
---js
---lang (存放用于支持多语言的js文件)
---plugins(扩展插件)
---skins(editor皮肤,2.3.1版有default、office 2003和silvers三种)
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>

FCKedit的使用

FCKedit的使用

/xiaoyao2011/archiv e/2011/10/27/Textarea.html富文本编辑很多地方需要用到,其中比较有名的是CKEditor,以前叫FCKEditor,虽然百度出的UEditor也比较火,但还是老牌子好用。

首先,去官网下载最新版3.6.5的。

然后删除_samples和_source文件夹,在项目根目录下新建个文件夹,名字自己估摸着起,叫ckeditor吧,然后把剩余的全部拷贝进去。

初步的配置就这样。

下面是使用方法。

首先页面中需要引用ckeditor.js这个文件,按上述路径,就是<script type="text/javascript" src="~/ckeditor/ckeditor.js"></script>然后在使用的位置如下代码所示:<textarea name="content" id="content"></textarea><script type="text/javascript">var editorContent;$(document).ready(function () {editorContent = CKEDITOR.replace("content");});</script>然后就是一些常用接口获得值:getData()设置值:setData("******")追加插入值:insertHTML("*******")上述代码中,editorContent获得了实例,就可以通过editorContent.getData()获得编辑框里的html内容了获得的值和设置的值以及插入的都是html格式的字符串(如果你用的MVC的话,因为有特殊字符默认是不允许提交的,需要在HttpPost的action 上加[AcceptVerbs(HttpVerbs.Post)]和[ValidateInput(false)]属性标记如下图:[HttpPost][AcceptVerbs(HttpVerbs.Post)][ValidateInput(false)]public ActionResult Create(string title, string content, string id){//todo}还有个就是编辑框的自定义配置,打开ckeditor文件夹下的config.js文件,如下图所示:/*Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or /license*/CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// nguage = 'fr';// config.uiColor = '#AADC6E';};可以自己配置一些东西,例如,要设置编辑框的宽度为500px,就添加一句config.width=500;即可,其他的自己试试还有就是toolbar的配置,有两个Full和Basic,默认是Full,可以通过上面的config.toobar="Basic";设置成简单模式。

使用FCKeditor配置的方法

使用FCKeditor配置的方法

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; } 3 关于文件上传的设置 修改 fckconfig.js var _FileBrowserLanguage = ‘php’ ; // asp | aspx | cfm | lasso | perl | php var _QuickUploadLanguage = ‘php’ ; // asp | aspx | cfm | lasso | php
使用 FCKeditor 配置的方法
大家知道使用 FCKeditor 配置吗?下面我们就给大家详细介绍一下吧! 1 首先删除不必要的文件节省空间。凡是以_开头的文件如_samples, _testcases 和一些用不到的.asp、.jsp、.cfm 文件统统干掉。 2 修改 fckconfig.js FCKConfig.AutoDetectLanguage = true ;//是否自动检测语言 FCKConfig.DefaultLanguage = ‘zh-cn’ ;//设置语言 FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/default/’ = 1 ;//tab 是否有效 FCKConfig.ToolbarStartExpanded = true ;//编辑工具条是否出现,等点展开 工具栏&rdquo;时才出现

FCKeditor使用方法详解

FCKeditor使用方法详解

FCKeditor使用方法详解目录一、FCKeditor简介 (2)1.1 FCKeditor是什么 (2)1.2 FCKeditor的特点 (3)二、安装与配置FCKeditor (5)三、基本功能使用方法 (6)3.1 文本格式化 (7)3.2 段落和列表操作 (9)3.3 图片和表格插入 (10)3.4 表单字段 (11)3.5 样式和脚本 (12)四、高级功能使用方法 (13)4.1 可视编辑器 (14)4.2 自动排版 (16)4.3 批量导入/导出 (17)4.4 国际化支持 (18)4.5 客户端存储 (20)五、自定义插件与扩展 (21)5.1 如何安装插件 (22)5.2 插件的使用方法 (24)5.3 开发自定义插件 (25)六、常见问题与解决方案 (27)6.1 常见问题列表 (28)6.2 问题解决步骤 (29)七、实例演示 (30)7.1 创建一个简单的HTML页面 (31)7.2 在页面中添加FCKeditor (32)7.3 配置和使用FCKeditor的各种功能 (34)八、FCKeditor在主流开发框架中的应用 (35)8.1 PHP+MySQL环境下的应用 (36)8.2 环境下的应用 (37)8.3 Java/Spring环境下的应用 (39)九、总结与展望 (39)9.1 FCKeditor的优点 (40)9.2 FCKeditor的局限性与未来发展趋势 (41)一、FCKeditor简介FCKeditor是一款由德国Maxthon公司开发的强大的网页文本编辑器,它具有丰富的功能、高度的可定制性和易用性,被广泛应用于各种Web应用中,如论坛、博客、新闻发布等。

FCKeditor不仅提供了基本的文本编辑功能,还支持图像、表格、超链接等元素的插入和编辑,以及自定义插件和宏,可以满足用户的各种编辑需求。

FCKeditor采用了基于JavaScript的富文本编辑技术,具有高效的性能和较小的体积,可以轻松地集成到各种Web应用中。

文字编辑器FCKeditor简介以及基本配置和使用方法

文字编辑器FCKeditor简介以及基本配置和使用方法

文字编辑器FCKeditor简介以及基本配置和使用方法什么是FCKeditorFCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。

它志于轻量化,不需要太复杂的安装步骤即可使用。

它可和PHP、JavaScript、ASP、、ColdFusion、Java、以及ABAP等不同的编程语言相结合。

“FCKeditor”名称中的“FCK”是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKeditor 相容于绝大部分的网页浏览器,像是 : Internet Explorer 5.5+ (Windows)、Mozilla Firefox 1.0+、Mozilla 1.3+ 和 Netscape 7+。

在未来的版本也将会加入对 Opera 的支援。

如何安装以及如何在中配置FCKeditor一、相关资料官方网站官方文档下载地址download/default.html官方演示demo/default.html二、拷贝核心文件并添加组件解压FCKeditor_2.6.4.zip文件,将fckeditor文件夹拷贝到项目中;解压_2.6.3.zip文件,将bin/Debug/2.0下的FredCK.FCKeditorV2.dll添加到项目引用中,并在.net中的工具箱中添加(具体方法不再细述)三、删除不必要的文件从官方下载下来的FCKEditor2.6大小有3.61M左右(解压后),其实有很多文件对于只用的来讲是不需要的,我们可以删除不必要的文件:1.根目录下除editor目录、fckconfig.js、fckeditor.js fckstyles.xml fcktemplates.xml 这几个保留,其余的全部删除2.editorfilemanagerconnectors目录中除aspx目录外全部删除3.editorlang目录中除en.js、zh.js 、zh-cn.js外全部删除4.删除_samples目录,当然如果你想看示例,就不要删除这个目录了。

FCKeditor使用方法详解

FCKeditor使用方法详解

FCKeditor使用方法技术详解作者:深蓝色QQ:76863715本文PHPChina论坛首发本文特为《PHP5和MySQL5 Web开发技术详解》一书编写1、概述FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。

具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。

它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。

本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。

FCKeditor官方网站:/FCKeditor Wiki:/2、下载FCKeditor登录FCKeditor官方站(),点击网站右上角“Download”链接。

笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。

如图1所示:图1:下载FCKeditor 2.4.3(最新稳定版)注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到网站上自动下载。

如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。

3、安装FCKeditor解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。

目录结构如下图所示:图2:网站目录结构图fckeditor目录包含FCKeditor2.4.3程序文件。

check.php用于处理表单数据。

add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。

3.1、用PHP调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

FCKeditor API使用详解2009-04-2614:46利用Javascript取和设FCKeditor值也是非常容易的,如下://获取编辑器中HTML内容function getEditorHTMLContents(EditorName){var oEditor=FCKeditorAPI.GetInstance(EditorName);return(oEditor.GetXHTML(true));}//获取编辑器中文字内容function getEditorTextContents(EditorName){var oEditor=FCKeditorAPI.GetInstance(EditorName);return(oEditor.EditorDocument.body.innerText);}//设置编辑器中内容function SetEditorContents(EditorName,ContentStr){var oEditor=FCKeditorAPI.GetInstance(EditorName);oEditor.SetHTML(ContentStr);}FCKeditorAPI是FCKeditor加载后注册的一个全局对象,利用它我们就可以完成对编辑器的各种操作。

在当前页获得FCK编辑器实例:var Editor=FCKeditorAPI.GetInstance('InstanceName');从FCK编辑器的弹出窗口中获得FCK编辑器实例:var Editor=window.parent.InnerDialogLoaded().FCK;从框架页面的子框架中获得其它子框架的FCK编辑器实例:var Editor=window.FrameName.FCKeditorAPI.GetInstance('InstanceName');从页面弹出窗口中获得父窗口的FCK编辑器实例:var Editor=opener.FCKeditorAPI.GetInstance('InstanceName');获得FCK编辑器的内容:oEditor.GetXHTML(formatted);//formatted为:true|false,表示是否按HTML格式取出也可用:oEditor.GetXHTML();设置FCK编辑器的内容:oEditor.SetHTML("content",false);//第二个参数为:true|false,是否以所见即所得方式设置其内容。

此方法常用于"设置初始值"或"表单重置"哦作。

插入内容到FCK编辑器:oEditor.InsertHtml("html");//"html"为HTML文本检查FCK编辑器内容是否发生变化:oEditor.IsDirty();在FCK编辑器之外调用FCK编辑器工具条命令:命令列表如下:DocProps,Templates,Link,Unlink,Anchor,BulletedList,NumberedList, About,Find,Replace,Image,Flash,SpecialChar,Smiley,Table,TableProp, TableCellProp,UniversalKey,Style,FontName,FontSize,FontFormat, Source,Preview,Save,NewPage,PageBreak,TextColor,BGColor,PasteText, PasteWord,TableInsertRow,TableDeleteRows,TableInsertColumn, TableDeleteColumns,TableInsertCell,TableDeleteCells,TableMergeCells, TableSplitCell,TableDelete,Form,Checkbox,Radio,TextField,Textarea, HiddenField,Button,Select,ImageButton,SpellCheck,FitWindow,Undo, Redo使用方法如下:mands.GetCommand('FitWindow').Execute();=FCKConfig.BasePath+'plugins/'//FCKConfig.Plugins.Add('placeholder','en,it');去掉//后,就相当于把placeholder这个插件功能加上了,fckeditor的插件文件都在/editor/plugins/文件夹下分类按文件夹放置的,对于fckeditor2.0来说,里面有两个文件夹,也就是有两个官方插件,placeholder这个文件夹就是我们刚才加上去的,主要用于多参数或单参数自定义标签的匹配,这个在制作编辑模板时非常管用,要想看具体实例的话,大家可以去下载acms这个系统查看学习,另一个文件夹tablecommands就是编辑器里的表格编辑用到的了。

当然,如果你想制作自己其它用途的插件,那就只要按照fckeidtor插件的制作规则制作完放置在/editor/plugins/下就行,然后再在fckeidtor.js里再添加FCKConfig.Plugins.Add('Plugin Name',',lang,lang');就可以了。

第二部分,如何让编辑器一打开的时候,编辑工具条不出现,等点“展开工具栏”时才出现?Easy,FCKeditor本身提供了这个功能啦,打开fckconfig.js,找到FCKConfig.ToolbarStartExpanded=true;改成FCKConfig.ToolbarStartExpanded=false;就可以啦!第三部分,使用自己的表情图标,同样打开fckcofnig.js到最底部那一段FCKConfig.SmileyPath=FCKConfig.BasePath+'images/smiley/msn/'; FCKConfig.SmileyImages=['regular_smile.gif','sad_smile.gif','wink_smile.gif'];FCKConfig.SmileyColumns=8;FCKConfig.SmileyWindowWidth=320;FCKConfig.SmileyWindowHeight=240;上面这段已经是我修改过的了,为了我发表此文的版面不会被撑得太开,我把FCKConfig.SmileyImages那一行改得只有三个表情图了。

第一行,当然是表情图标路径的设置,第二行是相关表情图标文件名的一个List,第三行是指弹出的表情添加窗口最每行的表情数,下面两个参数是弹出的模态窗口的宽和高喽。

第四部分,文件上传管理部分此部分可能是大家最为关心的,上一篇文章简单的讲了如何修改来上传文件以及使用fckeidtor2.0才提供的快速上传功能。

再我们继续再深层次的讲解上传功能FCKConfig.LinkBrowser=true;FCKConfig.ImageBrowser=true;FCKConfig.FlashBrowser=true;在fckconfig.js找到这三句,这三句不是连着的哦,只是我把他们集中到这儿来了,设置为true的意思就是允许使用fckeditor来浏览服务器端的文件图像以及flash等,这个功能是你插入图片时弹出的窗口上那个“浏览服务器”按钮可以体现出来,如果你的编辑器只用来自己用或是只在后台管理用,这个功能无疑很好用,因为他让你很直观地对服务器的文件进行上传操作。

但是如果你的系统要面向前台用户或是像blog这样的系统要用的话,这个安全隐患可就大了哦。

于是我们把其一律设置为false;如下FCKConfig.LinkBrowser=false;FCKConfig.ImageBrowser=false;FCKConfig.FlashBrowser=false;这样一来,我们就只有快速上传可用了啊,好!接下来就来修改,同样以asp 为范例进行,进入/editor/filemanager/upload/asp/打开config.asp,修改ConfigUserFilesPath="/UserFiles/"这个设置是上传文件的总目录,我这里就不动了,你想改自己改了好,再打开此目录下的upload.asp文件,找到下面这一段Dim resourceTypeIf(Request.QueryString("Type")&lt;&gt;"")ThenresourceType=Request.QueryString("Type")ElseresourceType="File"End If然后再在其后面添加ConfigUserFilesPath=ConfigUserFilesPath&resourceType&"/"&Year(Date())&"/"&Month(Date())&"/"这样的话,上传的文件就进入“/userfiles/文件类型(如image或file或flash)/年/月/”这样的文件夹下了,这个设置对单用户来用已经足够了,如果你想给多用户系统用,那就这样来改ConfigUserFilesPath=ConfigUserFilesPath&Session("username")& resourceType&"/"&Year(Date())&"/"&Month(Date())&"/"这样上传的文件就进入“/userfiles/用户目录/文件类型/年/月/”下了,当然如果你不想这么安排也可以修改成别的,比如说用户目录再深一层等,这里的Session("username")请根据自己的需要进行修改或换掉。

上传的目录设置完了,但是上传程序还不会自己创建这些文件夹,如果不存在的话,上传不会成功的,那么我们就得根据上面的上传路径的要求进行递归来生成目录了。

相关文档
最新文档