前几天在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.οnclick=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
效果图:
全文完。