- 浏览: 481147 次
- 性别:
- 来自: 济南
文章分类
最新评论
-
effort0829:
更重要的是可以通过 URL打开特定的资源,然而再windows ...
【转载】自定义URL Protocol 协议 -
追梦人zxy:
mark。我记得cglib代理的话就用set注入
通过CGLIB实现AOP的浅析(顺便简单对比了一下JDK的动态代理) -
zacry:
这个问题最近也困扰了我很久,我是从一个老项目里迁移代码时遇到的 ...
通过CGLIB实现AOP的浅析(顺便简单对比了一下JDK的动态代理) -
bo_hai:
netfork 写道哎,大家都回家过中秋节了,自己的问题,自己 ...
Struts 2中验证失败后,radio回复到默认值的问题 -
greatghoul:
看不出有什么严重的,加上 <%- %> 不就可以了 ...
不要在erb中加注释,后果很严重
前几天在ror中学习使用tinymce,从安装到使用,过程中还有一些问题,查了网上的一些资料,自己也琢磨了一些,现在整理一下,做个总结。
1、下载plugin。
http://github.com/kete/tiny_mce/tree/master
2、安装
- 将下载的东东解压后,拷贝到rails工程的vendor/plugins文件夹下,注意,tinymce插件的文件夹名应起为:tiny_mce
- 执行 rake tiny_mce:install 安装tinymce的静态文件到相应的文件夹下。如果使用的netbeans,可以右键点击工程名,找到Run/Debug Rake Task菜单,其中会找到tiny_mce:install的任务项,选中执行就可以了。
- 执行rake tiny_mce:update,可以将tiny_mce更新到最新版本。同样,也可以使用netbeans的便捷菜单来升级。
经过以上两步,tiny_mce就安装完毕了。
3、使用
- 在布局模板的头部增加<%#= include_tiny_mce_if_needed %>,这样,可以使tiny_mce插件自己决定是否引入相应的js脚本。
- 在视图模板的表单中,直接在text area标签中加上class为mceEditor,即可实现html编辑器效果。如:<%= f.text_area :body, :class => "mceEditor" %>
4、配置
tinymce是一个强大的html编辑器,提供了非常丰富的选项配置参数。当使用tinymce的ror插件时,可以通过在controller中设置这些参数。如:
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 => %w{formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough sub sup removeformat}, :theme_advanced_buttons2 => %w{undo 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 => %w{contextmenu paste media emotions table fullscreen}}, :only => [:new, :edit, :show, :index, :create, :update]) # tiny_mce考虑的非常贴心,这里是限定哪些action中起用
以上是常用的参数设定,还有更多更详细的,可以参考plugin目录下的tiny_mce_options.yml文件,当然,更详细的说明,可以到tinymce官网(http://tinymce.moxiecode.com/)查看,在这里强烈推荐一个网站提供的tinymce中文手册,非常详细,也给出了常见问题的说明:
http://www.inpeck.com/TinyMceManual/
5、几个问题的解决方法
问题1: 使用tinymce后,输入框中的文字默认非常小。
解决之法:
找到 rails工程目录\public\javascripts\tiny_mce\themes\advanced\skins\default\content.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文件最后增加一段代码即可:
p { margin: 0; }
tinymce默认回车是用p标签分隔的,因此会显得行间距非常大,将p的样式margin设为0后就可以表现为<br />的效果了。
另外注意,tinymce中提供了一个试验参数:
:force_br_newlines => true
这个的作用是在回车时,不使用p标签,而是改用<br />。我试验了这个参数,在ie下没有问题,但是在firefox浏览器下,行间距依然很大。当然这不是最关键的,最关键的是如果使用这个参数,将p标签换作br,那么在使用居中、居左、居右,还有清单、编号的工具条按钮时,会发现全部输入内容都做一个整体缩进或者编号列表显示,因此,不推荐使用这个试验中的参数,最佳方案是通过设置p标签的样式来实现。这个解决方法参考了javaeye网站的实现:http://www.iteye.com/javascripts/tinymce/themes/advanced/skins/default/content.css
还有值得说的一点是,在tinymce输入框中解决了回车产生的间隔较大的问题,在内容提交后显示时,也需要注意p标签的问题,照样需要通过css将显示内容部分的p象上文一样设置一下margin属性。
问题3:如何将上传的图片插到tinymce编辑器中
解决之法:
可以通过写一个javascript脚本来实现:
function insertImage(img_url) { window.tinyMCE.execCommand('mceInsertContent', false, "<br/><img src='"+img_url+"'/>"); }
另外,也可以参考javaeye的实现方法:
http://www.iteye.com/javascripts/editor/compress.js
insertImage:function(url){ if(this.mode=="bbcode"){ this.bbcode_editor.textarea.insertAfterSelection("\n[img]"+url+"[/img]\n"); }else{ tinyMCE.activeEditor.selection.setContent("<br/><img src='"+url+"'/><br/> ",{format:'text'}); }
问题4:插入到tinymce中的图片比较大时,把页面撑大了,很难看
解决之法:
参照javaeye的实现方法,通过一段javascript解决。
function fix_image_size(images,maxW) { if(images.length>0){ Event.observe(window,'load',function() { images.each(function(img){ var w=img.width; var h=img.height; if(w>maxW){ 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:magplus
/* 图片缩小后鼠标指针的样式 */ img.magplus { cursor: url(/images/magplus.gif), pointer; }
magplus.gif图片
在显示页面的最后,声明一段javascript脚本调用:
<script type="text/javascript"> fix_image_size($$('div#news_body img'), 700); </script>
问题5:使用tinymce后,提交到数据库的全是html代码,安全性如何保证
解决之法:
很显然,这确实是个问题。使用tinymce就是想实现所在即所得的编辑工具,在显示提交内容时,肯定不能过滤其中的html代码,否则就出不来效果了,但是如果不加控制全部显示,就会存在安全隐患的代码,最简单的如javascript脚本的XSS。我把我定制的tinymce的html标签和属性都抠了出来,然后通过ror的sanitized_allowed_tags和sanitized_allowed_attributes加以控制,就既解决了所见即所得的显示问题,也解决了一些html安全层面的问题。
我定制的内容如下:
在environment.rb中增加下面两行代码:
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.sanitized_allowed_attributes = %w(font id class style border src width height data type name value)
问题5是2009/6/28补充。
问题6:插入/编辑图片、媒体等想用浮动图,而不是pop窗口
初始化时,增加插件inlinepopups即可。
如:plugins的声明::plugins => %w{contextmenu paste media emotions table fullscreen inlinepopups }
问题6是2009/7/7补充。
问题7:跨域问题
如果静态文件使用主域声明,而在子域(二级域名页面)中有使用tinymce的情况,需要进行下面两步。
1、在主js文件中,定义:document.domain = 'hulian56.com';
2、在app_home\public\javascripts\tiny_mce\tiny_mce_popup.js文件中,增加定义:document.domain = 'hulian56.com';
问题7是2009/7/7补充。
基本上吧,就遇到这么多问题。
以上就是我在ror中使用tinymce的全过程和遇到的几个问题。
过程参考了以下网址的文章的内容,或者受到了启发:
http://github.com/kete/tiny_mce/tree/master
(插件官网提供了英文的使用说明)
http://qichunren.iteye.com/blog/351044
http://www.inpeck.com/TinyMceManual/
http://blog.csdn.net/guangboo/archive/2009/02/04/3861358.aspx
http://www.iteye.com/javascripts/editor/compress.js
http://www.iteye.com/javascripts/tinymce/themes/advanced/skins/default/content.css
效果图:
全文完。
评论
唉,这个问题我搞了一天了,主要是RJS, 还有RAILS实现js不熟。
netfork能指点一下么?怎么让input响应JS
嗯,只是列了最基本最常用的功能,其他的还需要大家自己探索。
发表评论
-
ruby访问mysql,报mysql_api.so (LoadError)
2010-09-23 22:45 1871转自:http://hi.baidu.com/vincent% ... -
用rails写了一个项目管理系统
2010-08-16 00:40 1741前段去杭州出差,收获 ... -
我好衰,Ubuntu上遇到rails3没法正常启动应用的麻烦
2010-06-07 00:24 1655最近终于迷上了Ubuntu,听Cedric说,ruby1.9+ ... -
在ubuntu下试了一下vim写rails
2010-05-31 00:31 1269果然不错。。。 看了一下时间,一不小心到凌晨了,搞技术就是辛 ... -
Windows下Apache+Mongrel运行不了的问题
2010-01-12 21:43 1079在使用Apache+Mongrel搭配运行时,有时候无法运行, ... -
couldn't load font "宋体 9", falling back to "Sans 9", expect ugly output.
2009-12-20 13:47 2753Windows下使用Ruby-GNOME2写GUI时,会报以下 ... -
Redmine真的是相当好用!!
2009-10-11 17:11 1479rails+java,所向无敌! 力挺Redmine!做的很不 ... -
“Mysql server has gone away” with Rails
2009-09-29 10:22 1640http://stackoverflow.com/questi ... -
不要在erb中加注释,后果很严重
2009-09-27 10:48 3916在erb中加了两行注释,上了Linux生产环境后,生成的htm ... -
Override automatic updated_at in ActiveRecord/Rails
2009-09-27 10:24 1047http://www.neeraj.name/blog/art ... -
改了数据库密码后,一定勿忘!
2009-09-23 21:46 808lighttpd/fastcgi这种配置下,当改了db密码后, ... -
exception_notification那是相当的好用
2009-09-23 15:18 888http://hellosoft.iteye.com/blog ... -
上线前最终定rails版本:2.3.4
2009-09-21 00:04 898呼呼!! -
使用Rails的Cache缓存了站内信
2009-09-15 14:55 1266通过Rails.cache来缓存当前登录用户的站内信条数,当其 ... -
导入cache_fu
2009-09-15 00:39 1047cache优化是长期的工作,今天通过cache_fu优化了一部 ... -
修改will_paginate支持ajax方式
2009-09-13 20:09 0转自http://www.iteye.com/topic/18 ... -
memcached+timed_fragment_cache
2009-09-11 23:48 15001、memcached (1)windows ... -
重启大法
2009-09-06 17:16 961在调试rails时,如果感觉确实没问题,结果死活调不通时,重启 ... -
多态下的counter_cache
2009-09-05 09:22 1127做rails的人是幸福的,因为有时候没必要一定要看专门的api ... -
对于attr_protected字段
2009-09-03 19:23 714update_attribute可以更新,update_att ...
相关推荐
简单介绍个ror的应用.以及其它方面。ROR介绍演讲课件 ruby on rails。
这几天一直在学习使用RoR(Ruby on Rails),想建立一个功能全面一点的LBS(Location Based Service)网站。但是对于我这个RoR的初学者(仅有几天时间)来说,毕竟太复杂了。因此本文试图简化原来的设计思路,抛弃一切...
ror中文资料ror中文资料
ROR安装的最版本的GEM,ruby on rails即ROR
rails 配置文档 ror ruby on rails
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
Rails::API 是 Rails 的精简版本,针对不需要使用完整 Rails 功能的开发者。 Rails::API 移除了 ActionView 和其他一些渲染功能,不关心Web前端的开发者可更容易、快速地开发应用程序,因此运行速度比正常的 Rails ...
ror实例ror实例ror实例
经典的ROR教程Agile Web Development with Rails,同时包含中文和英文版本,是学习ROR的必备资料 共有两部分
Ruby+on+Rails+3+Tutorial.pdf 应用Rails进行敏捷Web开发第4版.pdf (Agile Web Development with Rails) Rails.Recipes.Rails.3.Edition.pdf
RoR性能优化经验谈,牛人对ror的优化,值得大家阅读
gem 'graphql_rails' 然后执行: $ bundle 或自己安装为: $ gem install graphql_rails 入门 执行: $ bundle exec rails g graphql_rails:install 这将生成代码,使您可以更快地启动graphql 用法 将GraphQL...
在讲述Ruby知识的过程中,始终从Rails开发实战出发,揭示Rails和Puby之间的微妙关系,阐述Rails自身特有的技术、惯用法和设计理念,并用Rails开发了一个网上音乐店实例。最后还介绍了探索Rails源代码的各种技术,为...
ROR 架构介绍及了解
之前本人在windows 上搭建ROR环境,屡屡受挫,上网查资料、加入ruby on rails的qq群,关注ruby社区等,没有得到一套完整的正确的方法,很多朋友说不要在windows 弄ROR,很费力。的确很费力,后来在朋友的帮助下,...
Rails2.3.8开发安装环境整包,包含ruby1.8.7,rails2.3.8,以及9个相关依赖的gems,一次下载基本上就可以把ROR环境建成。
NULL 博文链接:https://xuxiangpan888.iteye.com/blog/266696
在讲述Ruby知识的过程中,始终从Rails开发实战出发,揭示Rails和Puby之间的微妙关系,阐述Rails自身特有的技术、惯用法和设计理念,并用Rails开发了一个网上音乐店实例。最后还介绍了探索Rails源代码的各种技术,为...
基于RoR的博客系统,代码风格简单清晰,前后太完善,适合初学者。