注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭研自动组

快乐耕耘,收获成长!

 
 
 

日志

 
 

FCKEditor插件与rails集成  

2010-12-17 19:17:04|  分类: 平台开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

作者:小云

FCKeditor介绍
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、 JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。
  著名的开源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor。原来叫FCK,是因为最初的开发者叫 Frederico Calderia Knabben;现在叫CK,意指"Content and Knowledge"。新版的编辑器的更新包括:新的用户界面,一个支持Plug-in的Javascript API,并提供对视觉障碍者的使用支持。"

FCK配置解释
FCK编辑器的配置在fckeditor.js,fckconfig.js,fckcustom,js文件中,配置的中文解释如下:
AutoDetectLanguage=true/false 自动检测语言
  BaseHref="http://autotest.blog.163.com/blog/" 相对链接的基地址
  ContentLangDirection="ltr/rtl" 默认文字方向
  ContextMenu=字符串数组,右键菜单的内容
  CustomConfigurationsPath="" 自定义配置文件路径和名称
  Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
  DefaultLanguage="" 缺省语言
  EditorAreaCss="" 编辑区的样式表文件
  EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
  EnableXHTML=true/false 是否允许使用XHTML取代HTML
  FillEmptyBlocks=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="" 浏览服务器时运行的URL
  ImageBrowserWindowHeight="" 图像浏览器窗口高度
  ImageBrowserWindowWidth="" 图像浏览器窗口宽度
  LinkBrowser=true/false 是否允许在插入链接时浏览服务器
  LinkBrowserURL="" 插入链接时浏览服务器的URL
  LinkBrowserWindowHeight=""链接目标浏览器窗口高度
  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的原因
QA平台是基于Rails开发的,根据网上的资源,rails与fckeditor整合的资料比较多,有现成的插件可以使用,可以减少自己去写这些插件的工作量,并且该插件整合的fckeditor版本为2.6,该版本的功能点已经够当前我们的使用。(最近发现有最新版CKeditor与Rails整合的介绍,需要使用CKeditor的可以去网上搜一下,为啥当初没发现CKeditor和Rails的介绍呢FCKEditor插件与rails集成 - 网易自动组 - 网易杭研自动组)

配置使用:
1.下载fckeditor,http://rubyforge.org/projects/fckeditorp/
2. 解压到vendor\plugins目录下,并且重新命名为fckeditor
3. 到该应用程序根目录下,然后运行rake fckeditor:install,执行自动安装
4. 自动安装后js文件会被复制到public/javascript/fckeditor目录下
5.
4.在自己的base.rhtml文件中添加下面语句,用于加载插件,如果用的页面不多,可以在需要使用的页面才加载此插件
<%= javascript_include_tag :fckeditor %>
5. 将需要使用该插件编辑的字段textarea
从原来的<%= text_area :issue, :description, :id => 'edit_issue_description',:class => 'wiki-edit'%>
替换为<%= fckeditor_textarea(:issue, :description, { :toolbarSet => 'Simple',:id => 'edit_issue_description',:class => 'wiki-edit',:toolbarKit => 'Simple', :width => '100%', :height => '600px' }) %>
6. 页面显示中原来基于Wiki样式的 显示会调用textilizable方法
如下:<%= textilizable @issue, :description %>
使用该插件后直接读取内容即可改成<%=@issue.description%>

如何打包代码以及打包的目的
首先下载fckpackager.exe文件,把该文件放在fckeditor根目录,运行该文件后会把editor/_source/中的文件打包到 editor/js文件夹中对应的fckeditorcode_gecko.js和fckeditorcode_ie.js文件中。fck插件加载的时候 只会加载editor/js下的js代码。
具体如何打包见:http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Customization/Scripts_Compression

打包后的js文件大小以及个数都做到了很好的压缩处理,更大的提高网站的性能。所有js源代码放在editor/_source/下,根据文件名我们就能知道该文件是干什么的,当我们需要修改的时候只修改该目录下文件,修改完成后进行打包即可。


遇到问题总结:

【问题一】 上传png文件在IE下出现文件类型不对,上传不了的问题
【解决方法】 在插件fckeditor_controller.rb文件中有一个MIME_TYPES里面列举了上传时允许的类型列表,png文件类型定义为 image/png,但是IE下通过调试代码发现获取到的确是image/x-png,因为两种类型对不上,导致上传不了,解决方法是在 MIME_TYPES中把image/x-png也加上

具体查看http://www.txdnet.cn/essay/view.jsp?tid=1261563827000&cid=2

【问题二】 任务页面有两个地方可以修改描述,插件自带的方法会出现id重名的问题
【解决方法】 修改插件代码,插件使用了按照issues_id_description的样式获取id,改成可以在自定义上传:id参数,按照此参数定义控件id值。修改插件Fckeditor.rb方法

【问题三】 在wiki编辑器和可视化编辑器之间切换的时候保证内容之前写的内容不丢失
【解决方法】 经过查找按照插件提供的API可以实现
获取fck插件textrea中的内容
1
2
var oEditor = FCKeditorAPI.GetInstance(fck_textarea_id);
var content = oEditor.GetXHTML(true);

设置fck插件t对应的extrea中的内容



var value = $(wiki_textarea_id).value
var oEditor = FCKeditorAPI.GetInstance(fck_textarea_id) ;
oEditor.SetData(value) ;

【问题四】 Firefox下编辑器中回车页面出现跳动的问题
【解决方法】 经过查找资料找到了网上对于此问题的一个修改补丁。见:http://dev.ckeditor.com/ticket/2279 修改editor/_source/classes/fckenterkey.js文件




if ( FCKBrowserInfo.IsSafari )
FCKDomTools.ScrollIntoView( eNextBlock || eNewBlock, false ) ;
else
if ( FCKBrowserInfo.IsGeckoLike )
 ( eNextBlock || eNewBlock ).scrollIntoView( false ) ;
改成


if ( FCKBrowserInfo.IsGeckoLike )
 FCKDomTools.ScrollIntoView( eNextBlock || eNewBlock, false ) ;

  评论这张
 
阅读(572)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018