ror(rails)中使用tinymce过程详解及问题解答_20090707更新
前几天在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
效果图：
全文完。