RubyOnRails学习笔记.docx

fckeditor插件使用和rails2.3不兼容的解决办法 ：fckeditor插件使用和rails2.3不兼容的解决办法 下载包解压放到当前项目主目录下 vendorpluginsfckeditor目录中 rake fckeditor:intall 在项目目录中出现 publicjavascriptsfckeditor 里面是产生的JS文件。 在更新了Rails2.3后发现和fckeditor出现了兼容性问题。 undefined method relative_url_root for # 搜了一下找到解决办法如下。主要是路径PATH问题 先到 目录 vendorpluginsfckeditor 找到文件 app/controllers/fckeditor_controller.rb look for uploaded = request.relative_url_root.to_s+#UPLOADED/#params:Type replace it with this uploaded = ActionController:Base.relative_url_root.to_s+#UPLOADED/#params:Type 同样在文件 lib/fckeditor.rb replace js_path = #request.relative_url_root/javascripts with js_path = #ActionController:Base.relative_url_root/javascripts ror(rails)中使用tinymce过程详解及问题解答关键字: tinymce ror rails 前几天在ror中学习使用tinymce，从安装到使用，过程中还有一些问题，查了网上的一些资料，自己也琢磨了一些，现在整理一下，做个总结。1、下载plugin。/kete/tiny_mce/tree/master 2、安装1. 将下载的东东解压后，拷贝到rails工程的vendor/plugins文件夹下，注意，tinymce插件的文件夹名应起为：tiny_mce 2. 执行 rake tiny_mce:install？ 安装tinymce的静态文件到相应的文件夹下。如果使用的netbeans，可以右键点击工程名，找到Run/Debug Rake Task菜单，其中会找到doc:plugins:tiny_mce的任务项，选中执行就可以了。 经过以上两步，tiny_mce就安装完毕了。3、使用1. 在布局模板的头部增加，这样，可以使tiny_mce插件自己决定是否引入相应的js脚本。 2. 在视图模板的表单中，直接在text area标签中加上class为mceEditor，即可实现html编辑器效果。如： mceEditor %4、配置tinymce是一个强大的html编辑器，提供了非常丰富的选项配置参数。当使用tinymce的ror插件时，可以通过在controller中设置这些参数。如：Ruby代码 1. uses_tiny_mce(:options= 2. :theme=advanced,#皮肤 3. :language=zh,#中文界面 4. :convert_urls=false,#不转换路径，否则在插入图片或头像时，会转成相对路径，容易导致路径错乱。 5. :theme_advanced_toolbar_location=top,#工具条在上面 6. :theme_advanced_toolbar_align=left, 7. :theme_advanced_resizing=true,#似乎不好使 8. :theme_advanced_resize_horizontal=false, 9. :paste_auto_cleanup_on_paste=true, 10. #工具条上的按钮布局 11. :theme_advanced_buttons1=%wformatselectfontselectfontsizeselectforecolorbackcolorbolditalicunderlinestrikethroughsubsupremoveformat, 12. :theme_advanced_buttons2=%wundoredocutcopypasteseparatorjustifyleftjustifycenterjustifyrightseparatorindentoutdentseparatorbullistnumlistseparatorlinkunlinkimagemediaemotionsseparatortableseparatorfullscreen, 13. :theme_advanced_buttons3=, 14. #字体列表中显示的字体 15. :theme_advanced_fonts=%w宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;AndaleMono=andalemono,times;Arial=arial,helvetica,sans-serif;ArialBlack=arialblack,avantgarde;BookAntiqua=bookantiqua,palatino;ComicSansMS=comicsansms,sans-serif;CourierNew=couriernew,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;TimesNewRoman=timesnewroman,times;TrebuchetMS=trebuchetms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapfdingbats,#字体 16. #:force_br_newlines=true,#此选项强制编辑器将段落符号(P)替换成换行符(BR)。不建议用：ff下不好使，用了此选项后，输入内容的居中、清单或编号都被破坏。 17. :plugins=%wcontextmenupastemediaemotionstablefullscreen, 18. :only=:new,:edit,:show,:index,:create,:update)#tiny_mce考虑的非常贴心，这里是限定哪些action中起用 uses_tiny_mce( :options = :theme = advanced, # 皮肤 :language = zh, # 中文界面 :convert_urls = false, # 不转换路径，否则在插入图片或头像时，会转成相对路径，容易导致路径错乱。 :theme_advanced_toolbar_location = top, # 工具条在上面 :theme_advanced_toolbar_align = left, :theme_advanced_resizing = true, # 似乎不好使 :theme_advanced_resize_horizontal = false, :paste_auto_cleanup_on_paste = true, # 工具条上的按钮布局 :theme_advanced_buttons1 = %wformatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough sub sup removeformat, :theme_advanced_buttons2 = %wundo redo cut copy paste separator justifyleft justifycenter justifyright separator indent outdent separator bullist numlist separator link unlink image media emotions separator table separator fullscreen, :theme_advanced_buttons3 = , # 字体列表中显示的字体 :theme_advanced_fonts = %w宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats, # 字体 # :force_br_newlines = true, # 此选项强制编辑器将段落符号(P)替换成换行符(BR)。不建议用：ff下不好使，用了此选项后，输入内容的居中、清单或编号都被破坏。 :plugins = %wcontextmenu paste media emotions table fullscreen, :only = :new, :edit, :show, :index, :create, :update) # tiny_mce考虑的非常贴心，这里是限定哪些action中起用以上是常用的参数设定，还有更多更详细的，可以参考plugin目录下的tiny_mce_options.yml文件，当然，更详细的说明，可以到tinymce官网（/）查看，在这里强烈推荐一个网站提供的tinymce中文手册，非常详细，也给出了常见问题的说明：/TinyMceManual/ 5、几个问题的解决方法问题1： 使用tinymce后，输入框中的文字默认非常小。 解决之法：找到 rails工程目录publicjavascriptstiny_mcethemesadvancedskinsdefaultcontent.css第一行的声明如下：body, td, pre color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;其中font-size:10px，就是默认输入框中的文字大小，可以改为12px或13px。注意：这里皮肤用的是advanced。另外升级后，需要重新改一下这个文件。问题2：在tinymce的输入框中打回车时，行间距太大。 解决之法：在“问题1”解决之法中的那个content.css文件最后增加一段代码即可：Html代码 1. p 2. margin:0; 3. p margin: 0; tinymce默认回车是用p标签分隔的，因此会显得行间距非常大，将p的样式margin设为0后就可以表现为的效果了。另外注意，tinymce中提供了一个试验参数：Ruby代码 1. :force_br_newlines=true:force_br_newlines = true这个的作用是在回车时，不使用p标签，而是改用。我试验了这个参数，在ie下没有问题，但是在firefox浏览器下，行间距依然很大。当然这不是最关键的，最关键的是如果使用这个参数，将p标签换作br，那么在使用居中、居左、居右，还有清单、编号的工具条按钮时，会发现全部输入内容都做一个整体缩进或者编号列表显示，因此，不推荐使用这个试验中的参数，最佳方案是通过设置p标签的样式来实现。这个解决方法参考了javaeye网站的实现：/javascripts/tinymce/themes/advanced/skins/default/content.css还有值得说的一点是，在tinymce输入框中解决了回车产生的间隔较大的问题，在内容提交后显示时，也需要注意p标签的问题，照样需要通过css将显示内容部分的p象上文一样设置一下margin属性。问题3：如何将上传的图片插到tinymce编辑器中 解决之法：可以通过写一个javascript脚本来实现：Js代码 1. functioninsertImage(img_url) 2. window.tinyMCE.execCommand(mceInsertContent,false,); 3. function insertImage(img_url) window.tinyMCE.execCommand(mceInsertContent, false, ); 另外，也可以参考javaeye的实现方法：/javascripts/editor/compress.jsJs代码 1. insertImage:function(url) 2. if(this.mode=bbcode) 3. this.bbcode_editor.textarea.insertAfterSelection(nimg+url+/imgn); 4. else 5. tinyMCE.activeEditor.selection.setContent( ,format:text); 6. insertImage:function(url)if(this.mode=bbcode)this.bbcode_editor.textarea.insertAfterSelection(nimg+url+/imgn);elsetinyMCE.activeEditor.selection.setContent( ,format:text); 问题4：插入到tinymce中的图片比较大时，把页面撑大了，很难看 解决之法：参照javaeye的实现方法，通过一段javascript解决。Js代码 1. functionfix_image_size(images,maxW) 2. if(images.length0) 3. Event.observe(window,load,function() 4. images.each(function(img) 5. varw=img.width; 6. varh=img.height; 7. if(wmaxW) 8. varf=1-(w-maxW)/w); 9. img.title=点击查看原始大小图片; 10. img.addClassName(magplus); 11. img.onclick=function() 12. window.open(this.src); 13. ; 14. img.width=w*f; 15. img.height=h*f; 16. 17. ); 18. ); 19. 20. function fix_image_size(images,maxW) if(images.length0) Event.observe(window,load,function() images.each(function(img) var w=img.width; var h=img.height; if(wmaxW) var f=1-(w-maxW)/w); img.title=点击查看原始大小图片; img.addClassName(magplus); img.onclick=function() window.open(this.src); ; img.width=w*f; img.height=h*f; ); ); 上面的脚本中用到了一个css的class：magplusHtml代码 1. /*图片缩小后鼠标指针的样式*/ 2. img.magplus 3. cursor:url(/images/magplus.gif),pointer; 4. /* 图片缩小后鼠标指针的样式 */img.magplus cursor: url(/images/magplus.gif), pointer;magplus.gif图片在显示页面的最后，声明一段javascript脚本调用：Js代码 1. 2. fix_image_size($(div#news_bodyimg),700); 3. fix_image_size($(div#news_body img), 700);问题5：使用tinymce后，提交到数据库的全是html代码，安全性如何保证 解决之法：很显然，这确实是个问题。使用tinymce就是想实现所在即所得的编辑工具，在显示提交内容时，肯定不能过滤其中的html代码，否则就出不来效果了，但是如果不加控制全部显示，就会存在安全隐患的代码，最简单的如javascript脚本的XSS。我把我定制的tinymce的html标签和属性都抠了出来，然后通过ror的sanitized_allowed_tags和sanitized_allowed_attributes加以控制，就既解决了所见即所得的显示问题，也解决了一些html安全层面的问题。我定制的内容如下：在environment.rb中增加下面两行代码：Xml代码 1. config.action_view.sanitized_allowed_tags=%w(tabletrtdspanbrstrongempsubsupimgobjectparamulliol) 2. config.action_view.sanitized_allowed_attributes=%w(fontidclassstylebordersrcwidthheightdatatypenamevalue) config.action_view.sanitized_allowed_tags = %w(table tr td span br strong em p sub sup img object param ul li ol) config.action_view.s