FCKeditor使用详解.docx
- 文档编号:5608673
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:18
- 大小:31.67KB
FCKeditor使用详解.docx
《FCKeditor使用详解.docx》由会员分享,可在线阅读,更多相关《FCKeditor使用详解.docx(18页珍藏版)》请在冰豆网上搜索。
FCKeditor使用详解
FCKeditor介绍
FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务。
它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net、ASP、ColdFusion、PHP、Java、Active-FoxPro、Lasso、Perl、ython等编程环境。
官方网站
官方文档
下载地址
其实不同版本的FCKeditor配置过程基本类似,这里拿最新的2.63作为实例进行介绍。
FCKeditor安装和配置
到,下载FCKeditor2.63.zip和FCKeditor.NET2.63版的2个zip包
(a)FCKeditor_2.6.3是其最新的Javascript文件和图片等;
(b)FCKeditor.Net_2.6.3.zip是一个ASP.NET控件DLL文件。
将a解压缩,得到FCKeditor的核心文件,将其拷贝到web项目的根目录下(建议,当然你可以任意放)。
然后解压b,得到.NET支持的源码,进入,bin下的Release中存在FCKeditor的DLL(这里也有debug文件夹,建议使用release),我们需要在项目中添加对其引用即可。
1.工程浏览器上右键,选择添加引用(AddReference…),找到浏览(Browse)标签,然后定位到你解压好的FredCK.FCKeditorV2.dll,确认就可以了。
这时,FCKPro工程目录下就多了一个bin文件夹,里面包含FredCK.FCKeditorV2.dll文件。
2.为了方便RAD开发,我们把FCKeditor控件也添加到VS的工具箱(Toolbox)上来,展开工具箱的常用标签组(General),右键选择组件(ChooseItems…),在对话框上直接找到浏览按钮,定位FredCK.FCKeditorV2.dll,然后确认就可以了。
3. 配置WebConfig,在
BasePath"value="/Web/fckeditor/"/> UserFilesPath"value="/Web/Upload/"/> 说明: "/Web/"是项目名称。 BasePath: fckeditor是FCKeditor整个文件夹所在的目录。 UserFilesPath: 上传文件、图片等存储的路径。 完成之后,再完成了下面的详细配置中的第一条,我们就可以使用FCKeditor控件了。 为了更好的调试这个工具,使得其满足我们的实际需要,必须对其属性的设置进行修改。 FCKeditor详细的设置 进入FCKeditor文件夹,编辑fckconfig文件。 其实里面罗列的都比较清楚,编写比较规范,还有一些注释,但是只要略懂英文的就能够看得懂,操作起来也非常的方便。 下面就简单介绍几种常用的设置作为一个小例子。 1、此步骤是必须的,也是最重要的一步,必不可少的。 原来: var_FileBrowserLanguage='php';//asp|aspx|cfm|lasso|perl|php|py var_QuickUploadLanguage='php';//asp|aspx|cfm|lasso|php 改为: var_FileBrowserLanguage='aspx';//asp|aspx|cfm|lasso|perl|php|py var_QuickUploadLanguage='aspx';//asp|aspx|cfm|lasso|php 2、配置语言包。 有英文、繁体中文等,这里我们使用简体中文。 原来: FCKConfig.DefaultLanguage='en'; 改为: FCKConfig.DefaultLanguage='zh-cn'; 3、配置皮肤。 有default、office2003、silver风格等,这里我们可以使用默认。 FCKConfig.SkinPath=FCKConfig.BasePath+'skins/default/'; 4、在编辑器域内可以使用Tab键。 (1为是,0为否) FCKConfig.TabSpaces=0;改为FCKConfig.TabSpaces=1; 5、加上几种我们常用的字体的方法,例如: 修改 FCKConfig.FontNames='Arial;ComicSansMS;CourierNew;Tahoma;TimesNewRoman;Verdana'; 改为: FCKConfig.FontNames='宋体;黑体;隶书;楷体;Arial;ComicSansMS;CourierNew;Tahoma;TimesNewRoman;Verdana' 6、编辑器域内默认的显示字体为12px,想要修改可以通过修改样式表来达到要求,打开/editor/css/fck_editorarea.css,修改font-size属性即可。 如font-size: 14px; 7、关于安全性。 如果你的编辑器用在网站前台的话,那就不得不考虑安全了,在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,也就是基本的toolbar, FCKConfig.ToolbarSets["Basic"]=[ ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','Image','-','About'] ]; 其实这些,你都可以按自己的需求进行设置,功能的足够强大为了提供了更多的选择,肯定能够满足你的需求。 当然也可以配置一下WebConfig,也能让它确保安全,接下来我们将讲到。 FCKEditor2.6的问题: 1.FCKeditor出现"thisconnectorisdisabledPleasecheckthe"editor/filemanager/connectors/aspx/config.aspx"错误的解决办法 打开editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法,返回true privateboolCheckAuthentication() { returntrue; } 2.在上传文件窗口点击浏览服务器,会出现theserverdidn'tsendbackaproperxml.....错误提示,因为后期版本的FCKEditor要求不同类型的文件分别传到不同的目录,包括file,image,falsh,media等目录,一定要先建立起来。 3.未能加载类型“FredCK.FCKeditorV2.FileBrowser.Config” 出现这样的问题主要是因为: 你项目里使用的fck的版本和你bin目录下的fck的dll的版本不一样导致的! 把fckeditor.dll再添加个新的,但是要与你用的fckeditor文件是一个版本的 4.发布以后控件的位置说找不到网页 将配置文件的改为相对路径~/ BasePath"value="~/fckeditor/"/> UserFilesPath"value="~/Upload/"/> 5.FCKeditorTimes附近有语法错误 Times附近有语法错误 ----这个问题是FCKEditor的BUG;很多人不理解为什么“Times附近有语法错误”,自己Times是从哪里来的,这个问题大家看一下源HTMl就知道,一种叫“TimesNewRoman”什么的字体。 其实说白了也就是格式错误。 提供一种暂时的Client端的解决办法: 发布内容时,会提示是否删除word格式,选“是”,并选择将Css,字体格式全部清除。 一种一劳永逸的办法,将FCKEditor1.value替换为FCKEditor1.value.Replace("'","''")问题就可以得到解决。 FCKeditor精简 进入FCKeditor文件夹,把所有“_”开头的文件和文件夹删掉,这些都是一些范例,只保留editor文件夹、fckconfig、fckeditor、fckstyles.xml、fcktemplates.xml就可以了; 进入editor文件夹,删掉“_source”文件夹,里面放的同样是源文件; 退回上一级目录进入filemanager文件夹,有browser和upload两个文件夹。 进入browser"default"connectors,只保留aspx文件夹,其余的删掉;mcpuk目录亦可删除;upload也一样,只保留aspx文件夹; 退到editor再进入images文件夹,smiley里面放的是表情图标,有msn和fun两个系列,如果你想用自己的表情图标,可以把它们都删除;如果你想用这里的表情图标那就不要删了; lang里面放的是语言包,如果只是用简体中文,那么只保留fcklanguagemanager、zh-cn两个文件就行了,建议也保留en(英文)、zh(繁体中文)两个文件,fcklanguagemanager是语言配置文件,有了它才能和fckconfig里的设置成对,对应上相应的语言文件,一定要保留! 再退出lang文件夹,进入skins文件夹,如果你想使用FCKeditor默认的奶黄色,那就把除了default文件夹外的另两个文件夹直接删除,如果想用别的,那就看你自己的喜好了。 fckeditor怎么屏蔽一些按钮? fckconfig.js文件中 FCKConfig.ToolbarSets["Default"] javascript验证: functiona() { //得到控件的html varcheckContent=FCKeditorAPI.GetInstance("FCKeditor1").GetXHTML(); alert(checkContent); //得到html的长度 varlen=FCKeditorAPI.GetInstance("FCKeditor1").GetXHTML().length; alert(len); //得到fck控件 varoEditor=FCKeditorAPI.GetInstance('FCKeditor1'); //得到编辑器中的文字 vartext=oEditor.EditorDocument.body.innerText; alert(text); //让编辑器得到焦点 oEditor.Focus(); } 内容用法详解: 获得fck(content是fck编号) varoEditor=FCKeditorAPI.GetInstance('content'); varcontent=oEditor.GetXHTML(true); //获取编辑器中HTML内容 functiongetEditorHTMLContents(EditorName){ varoEditor=FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } //获取编辑器中文字内容 functiongetEditorTextContents(EditorName){ varoEditor=FCKeditorAPI.GetInstance(EditorName); return(oEditor.EditorDocument.body.innerText); } //设置编辑器中内容 functionSetEditorContents(EditorName,ContentStr){ varoEditor=FCKeditorAPI.GetInstance(EditorName); oEditor.SetHTML(ContentStr); } FCKeditorAPI是FCKeditor加载后注册的一个全局对象,利用它我们就可以完成对编辑器的各种操作。 在当前页获得FCK编辑器实例: varEditor=FCKeditorAPI.GetInstance('InstanceName'); 从FCK编辑器的弹出窗口中获得FCK编辑器实例: varEditor=window.parent.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,是否以所见即所得方式设置其内容。 此方法常用于"设置初始值"或"表单重置"哦作。 插入内容到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 使用方法如下: oEditor.Commands.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('PluginName',',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文件,找到下面这一段 DimresourceType If(Request.QueryString("Type")<>"")Then resourceType=Request.QueryString("Type") Else resourceType="File" EndIf 然后再在其后面添加 ConfigUserFilesPath=ConfigUserFilesPath&resourceType&"/"&Year(Date())&"/"&Month(Date())&"/" 这样的话,上传的文件就进入“/userfiles/文件类型(如image或file或flash)/年/月/”这样的文件夹下了,这个设置对单用户来用已经足够了,如果你想给多用户系统用,那就这样来改 ConfigUserFilesPath=ConfigUserFilesPath&Session("username")&resourceType&"/"&Year(Date())&"/"&Month(Date())&"/" 这样上传的文件就进入“/userfiles/用户目录/文件类型/年/月/”下了,当然如果你不想这么安排也可以修改成别的,比如说用户目录再深一层等,这里的Session("username")请根据自己的需要进行修改或换掉。 上传的目录设置完了,但是上传程序还不会自己创建这些文件夹,如果不存在的话,上传不会成功的,那么我们就得根据上面的上传路径的要求进行递归来生成目录了。 找到这一段 DimsServerDir sServerDir
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FCKeditor 使用 详解