有了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编辑器中文化
分享到:
相关推荐
tiny_mce, Ruby on Rails 插件( pre Rails 3.1 ),允许你轻松地将TinyMCE编辑器实现到你的应用程序中 用于 Rails的 TinyMCE因为我没有时间维护它,而且代码库处于不一致状态,所以这个 gem 被折旧 ! 似乎如下笔记。...
由于我在之前的项目中使用了 TinyMce 编辑器,因此我想分享我所做的事情,毕竟分享是关怀 ;) 我添加了菜单按钮、具有子菜单项的菜单项以及一个列表框。 工具栏中的字体大小。 <hr> 插入菜单中的水平规则标签。 ...
插件使用jrails(jQuery)和Paperclip插件来支持图像和媒体上传特征提供富文本编辑器可自定义的TinyMCE插件易于整合支持图像上传和插入支持媒体上传和YouTube嵌入待办事项:文档上传插件安装将此行添加到您的应用...
Redmine Tiny Mce 编辑器 Redmine 2.5 的可选所见即所得编辑器。 将旧项目迁移到编辑器 只需使用 compile to html rake 任务: RAILS_ENV=production REDMINE_PROJECT=test rake redmine_tiny_mce:compile_to_html
NULL 博文链接:https://hlee.iteye.com/blog/587000
Ruby on Rails中文指南
rails_email_preview, 在 Rails 中,预览和编辑应用程序邮件程序模板 Rails 电子邮件预览 使用这里 Rails 引擎在浏览器中预览电子邮件。 兼容 Rails 4.2 。电子邮件审阅: 所有电子邮件预览的列表: 代表有两个主题...
shoppe-example, 在 Rails 中使用Shoppe平台的示例存储实现 这是一个 Rails 应用程序,它使用 Shoppe 构建。 它具有一个可以爱的设计,以充分演示Shoppe平台提供的功能以及它在 Rails 应用程序中的。 正在启动要开始...
这是一个在Rails应用程序中使用React并使用webpack的示例
使用Aptana+Rails开发Rails Web应用 有Aptana的安装配置等等,中文
asset_hat, 在 Rails 中,快速加载CSS和 JS 你的资产被覆盖 AssetHat快速加载CSS和 JS 。 你的资产被覆盖。当首次请求该包时,使用 Rails'默认的资源缓存,CSS和JS连接( 而不是缩小) 。 不够好为了使你的页面加载更...
rails-assets, 在 Rails 中,资产管理的解决 Rails 资产 Bundler 到 Bower 代理本自述文件涉及项目的开发方面。 访问站点了解如何在你的应用程序中使用 Rails 资产。 插件开发设置git clone git@github.com:tenex/r
Webpacker:使用Webpack在Rails中管理类似app的JavaScript模块
《Rails之道》详细讨论了Rails的程序代码并通过分析Rails中的代码片段来深入解释它的功能,同时,《Rails之道》部分章节也摘录了一些API文档中的内容,使读者能够快速地找到对应的API文档、相关的示例代码以及深入...
NULL 博文链接:https://hlee.iteye.com/blog/345775
使您在Rails应用程序中使用Roar的代表变得有趣。 咆哮轨道的开发将在未来停止,我们鼓励用户开始迁移到 (和 )。 Roar是用于解析和呈现REST文档的框架。 有关代表的更好的概述,请检查。 Roar-rails可为您提供...
在过去的几年中,《Ruby on Rails Tutorial》这本书被视为介绍使用 Rails 进行 Web 开发的先驱者。 在这个全球互联的世界中,计算机编程和 Web 应用程序开发都在迅猛发展,我很期待能为中国的开发者提供 Ruby on ...
Ruby On Rails中文教材(PDF)
Trix - 是Rails 框架的创造者开发的一个富文本编辑器