ror(rails)中使用tinymce过程详解及问题解答_20090707更新

前几天在ror中学习使用tinymce，从安装到使用，过程中还有一些问题，查了网上的一些资料，自己也琢磨了一些，现在整理一下，做个总结。

 

1、下载plugin。

http://github.com/kete/tiny_mce/tree/master

 

2、安装

1. 将下载的东东解压后，拷贝到rails工程的vendor/plugins文件夹下，注意，tinymce插件的文件夹名应起为：tiny_mce
2. 执行 rake tiny_mce:install  安装tinymce的静态文件到相应的文件夹下。如果使用的netbeans，可以右键点击工程名，找到Run/Debug Rake Task菜单，其中会找到tiny_mce:install的任务项，选中执行就可以了。
3. 执行rake tiny_mce:update，可以将tiny_mce更新到最新版本。同样，也可以使用netbeans的便捷菜单来升级。
   

经过以上两步，tiny_mce就安装完毕了。

 

3、使用

1. 在布局模板的头部增加<%#= include_tiny_mce_if_needed %>，这样，可以使tiny_mce插件自己决定是否引入相应的js脚本。
2. 在视图模板的表单中，直接在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/>&nbsp;",{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

 

效果图：

 

全文完。

 

评论

6 楼 八岭书生 2012-11-12  

请问下 如何获取插入进来的图片url ？

5 楼 jinleileiking 2010-03-17  

问题3：如何将上传的图片插到tinymce编辑器中

唉，这个问题我搞了一天了，主要是RJS, 还有RAILS实现js不熟。

netfork能指点一下么？怎么让input响应JS

4 楼 Enn 2010-01-20  

正好碰到了要用这个上传本地图片的问题顺带还解决了字体太小 哈哈 谢了。

3 楼 yulon 2009-12-31  

不错,写得很详细

2 楼 netfork 2009-07-01  

ecsun 写道

tinyMCE还支持bbcode 功能

嗯，只是列了最基本最常用的功能，其他的还需要大家自己探索。

1 楼 netfork 2009-06-24  

自己踩了自己一脚　。。。。