在Rails中快速方便地使用Tiny mce编辑器

有了tiny_mce插件，使用HTML在线所见所得编辑器变得再简单不过了。

tiny_mce插件的地址：http://github.com/kete/tiny_mce/tree/master

1.下载tiny_mce插件,放在RAILS_ROOT/verdor/plugin中，注意，要将tiny_mce插件目录命名为tiny_mce

2.rake tiny_mce:install

3.在控制器中加上：uses_tiny_mce

class ArticlesController < ApplicationController
uses_tiny_mce
def new
@article = Article.new
end
end

4.在模板/layouts/application.html.erb头部加上<%= include_tiny_mce_if_needed %>

5.在表单页面，为表单中的text area加上class为mceEditor，即可。

<%= f.text_area :body, :class => "mceEditor" %>

试试看，使用方便极了。


另外，对于Tiny Mce编辑器也可以自由定制各种配置选项，
如:

class ArticlesController < ApplicationController
  uses_tiny_mce :options => {
                              :theme => 'advanced',
                              :language => 'zh',
                              :theme_advanced_resizing => true,
                              :theme_advanced_resize_horizontal => false,
                              :plugins => %w{ table fullscreen }
                            }
end

更多选项，请看tiny_mce插件目录中的tiny_mce_options.yml文件。

更新：下面这个配置比较靠谱

uses_tiny_mce :options => {
    :theme => 'advanced',
    :language => 'zh',
    :theme_advanced_resizing => true,
    :theme_advanced_resize_horizontal => false,
    :theme_advanced_toolbar_location => "top",
    :theme_advanced_toolbar_align => "left",
    :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},
    :plugins => %w{contextmenu paste media emotions table fullscreen}
  }

还有比这使用更简单和易维护的么？

-------------分割线------------
Tiny Mce编辑器中文化

通过以上方式安装的编辑器是默认英文语言的，我们可以在
http://tinymce.moxiecode.com/download_i18n.php下载中文语言包，解压后，覆盖相应的目录，然后在控制器中对uses_tiny_mce声明中加上:language => 'zh'选项配置，这样就实现了Tiny Mce编辑器中文化

评论

2 楼 virusswb 2012-11-02  

paperclip文件上传

1 楼 blackwolf1983 2009-03-21  

怎么解决文件上传问题，还有最后那一排的数据工具是不用的，怎么去掉知道吗