`

rails 富文本编辑器

 
阅读更多

Kindeditor是国产的所见即所得javascript富文本编辑器, 访问 http://www.kindsoft.net 获取更多信息. rails_kindeditor可以帮助你的rails程序集成kindeditor,包括了图片和附件上传功能,文件按照类型、日期进行存储。

注意: rails_kindeditor ~> v0.3.0 仅支持Rails3.1+!当然,包括Rails3.1和Rails3.2. 如果你使用rails3.0.x,请使用rails_kindeditor v0.2.8

安装及使用

将下面代码加入Gemfile:

  gem 'rails_kindeditor', '~> 0.3.11'

运行"bundle"命令:

  bundle

安装Kindeditor,运行下面的代码:

  rails generate rails_kindeditor:install

使用方法:

  1. <%= kindeditor_tag :content, 'default content value' %>
     # or <%= kindeditor_tag :content, 'default content value', :width => 800, :height => 300 %>
     # or <%= kindeditor_tag :content, 'default content value', :allowFileManager => false %>
  2. <%= form_for @article do |f| -%>
       ...
       <%= f.kindeditor :content %>
       # or <%= f.kindeditor :content, :width => 800, :height => 300 %>
       # or <%= f.kindeditor :content, :allowFileManager => false %>
       ...
     <% end -%>

你可以像往常那样使用kindeditor自身的初始化参数,请访问 http://www.kindsoft.net/docs/option.html 查看更多参数。

另外,rails_kindeditor还额外提供一个"simple_mode"参数,以便快捷使用简单模式的kindeditor。

  kindeditor_tag :content, 'default content value', :simple_mode => true
  f.kindeditor_tag :content, :simple_mode => true
  f.input :content, :as => :kindeditor, :input_html => { :simple_mode => true } # simple_form & formtastic  

完毕!

SimpleForm与Formtastic集成:

simple_form:

  <%= form.input :content, :as => :kindeditor, :label => false, :input_html => { :width => 800, :height => 300 } %>

formtastic:

  <%= form.input :content, :as => :kindeditor %>
  <%= form.input :content, :as => :kindeditor, :input_html => { :height => 300 } %>

如何获取kindeditor的内容

  <%= form_for @article do |f| %>
    <%= f.kindeditor :content, :editor_id => 'my_editor' %>
  <% end %>

可通过下面的Javascript代码获取内容:

  // Javascript code
  my_editor.html();

上传图片及文件配置

当你运行"rails generate rails_kindeditor:install"的时候,安装器会将配置文件拷贝到config/initializers文件夹。 你可以配置以下上传选项:

  # 指定上传目录,目录可以指定多级,都存储在public目录下.
  # You can customize it , eg: config.upload_dir = 'this/is/my/folder'
  config.upload_dir = 'uploads'

  # 指定允许上传的文件类型.
  config.upload_image_ext = %w[gif jpg jpeg png bmp]
  config.upload_flash_ext = %w[swf flv]
  config.upload_media_ext = %w[swf flv mp3 wav wma wmv mid avi mpg asf rm rmvb]
  config.upload_file_ext = %w[doc docx xls xlsx ppt htm html txt zip rar gz bz2]

  # 处理上传文件,需要mini_magick
  #     处理以前      => 处理以后
  # eg: 1600x1600 => 800x800
  #     1600x800  => 800x400
  #     400x400   => 400x400 # 图片小于该限制尺寸则不作处理
  # config.image_resize_to_limit = [800, 800]

将上传文件信息记录入数据库(可选)

rails_kindeditor 可以将上传文件信息记录入数据库,以便扩展应用.

运行下面的代码,有两项选项:1.active_record 2.mongoid,默认是active_record。

  rails generate rails_kindeditor:migration
  or
  rails generate rails_kindeditor:migration -o mongoid

运行下面的代码:

  rake db:migrate

如果你使用的是mongoid, 请在你的Gemfile里加入'gem "carrierwave-mongoid"'

  gem 'carrierwave-mongoid'

License

MIT License.

 
分享到:
评论

相关推荐

    Trix是Rails框架的创造者开发的一个富文本编辑器

    Trix是一款由Ruby on Rails框架的创始人David Heinemeier Hansson所开发的富文本编辑器。这个工具的设计理念是提供一个简洁、易于使用的界面,同时保持强大的文本处理能力,尤其适合于网页应用中的内容编辑场景。它...

    富文本编辑器summernote

    富文本编辑器是网页开发中常见的一种工具,用于创建、编辑和格式化文本内容,使得非程序员也能轻松地创建复杂的页面布局和样式。Summernote是一款功能强大的富文本编辑器,以其直观易用和高度定制化的特性深受开发者...

    tiny_mce_customization:富文本编辑器 - Tiny Mce 4,Rails 自定义

    请随意在 Rails 4 上拉取和自定义 tinymce 编辑器版本 4。 由于我在之前的项目中使用了 TinyMce 编辑器,因此我想分享我所做的事情,毕竟分享是关怀 ;) 我添加了菜单按钮、具有子菜单项的菜单项以及一个列表框。 ...

    Trix:用于日常写作的富文本编辑器-开源

    用于日常写作的富文本编辑器。 在您的 Web 应用程序中撰写格式精美的文本。 Trix 是一个用于编写消息、评论、文章和列表的编辑器——大多数网络应用程序都是由这些简单的文档组成的。 它具有复杂的文档模型,支持...

    rails_tiny_mce:Tiny MCE富文本编辑器,用于使用jquery,带有图像和媒体上载支持的回形针的Rails

    RailsTinyMCE-Rails的富文本编辑器TinyMCE是一个javascript RTF编辑器。 很容易与博客,cms,消息和邮件集成。 插件使用jrails(jQuery)和Paperclip插件来支持图像和媒体上传特征提供富文本编辑器可自定义的TinyMCE...

    ruby rails_kindeditor(编译器)插件

    "rails_kindeditor" 插件就是为了解决这一需求,它将 KindEditor 富文本编辑器与 Ruby on Rails 框架相结合,提供了一种简单易用的解决方案。 KindEditor 是一个功能强大的 JavaScript 富文本编辑器,支持多种...

    ror文本编辑插件

    在Ruby on Rails(RoR)框架中,开发者经常需要处理用户输入的数据,这通常涉及到文本编辑器的使用。"ror文本编辑插件"显然是一种专为Rails应用设计的工具,旨在提升用户在网页上编辑文本的体验。这个插件可能包含...

    text-editor-orchestrate:使用 Ruby on Rails 和 Orchestrate.io 的简单文本编辑器

    在本项目"**text-editor-orchestrate**"中,我们看到一个使用Ruby on Rails框架和Orchestrate.io服务构建的简单文本编辑器。Ruby on Rails(简称Rails)是一个流行的开源Web应用程序框架,遵循MVC(模型-视图-控制器...

    CKeditor编辑器

    总结来说,CKeditor是一个强大的富文本编辑器,其丰富的功能和高度的可定制性使其成为网站内容管理的得力工具。无论是个人博客、企业网站还是在线教育平台,CKeditor都能提供一个高效、稳定的编辑环境,帮助用户轻松...

    wysiwtf_editor:富文本编辑器和差异沙盒

    欢迎到Rails的 Rails 是一个 Web 应用程序框架,它包含根据模型-视图-控制模式创建数据库支持的 Web 应用程序所需的一切。 此模式将视图(也称为演示文稿)拆分为“哑”模板,这些模板主要负责在 HTML 标记之间...

    征服-Ruby On Rails.rar

    另外,Action Text引入富文本编辑和处理,Action Policy增强了权限控制。 为了开始学习Ruby on Rails,你需要安装Ruby环境,然后通过`gem install rails`安装Rails。接着,你可以使用`rails new`命令创建一个新的...

    Rails Recipes Final.pdf

    **Showing a Live Preview**:显示实时预览,通常用于富文本编辑器等场景,让用户能够即时看到输入结果的变化。 4. **Autocomplete a TextField**:自动完成文本字段,通过Ajax请求实现对输入框内容的建议提示,...

    前端项目-sir-trevor-js.zip

    Sir Trevor JS是一个开源的富文本编辑器,它使用户能够在网页上创建和编辑结构化的、富媒体的内容,而不仅仅是传统的纯文本。 在深入探讨Sir Trevor JS之前,我们先来了解一下前端项目的基本概念。前端项目通常涉及...

    StimulusReflex、CableReady、Turbo、Vite、Devise、Rails7准.zip

    这个版本引入了许多新特性和改进,如ActionText(用于富文本编辑)、ActionView组件化、 Turbo和Alpine.js集成等,旨在提升开发效率和用户体验。 现在,让我们更深入地探讨一下Rails 7和这些技术如何结合使用: - ...

    summernote-master.zip

    在现代网页开发中,文本编辑器是一个不可或缺的组件,它允许用户在浏览器上进行富文本编辑,如创建和编辑文章、博客或邮件。其中,Summernote是一款非常受欢迎的开源前端页面文本编辑器控件,以其直观易用和高度可...

    rails-wxshop:Rails Vue商店框架

    整合 ueditor 富文本编辑器 创建后台管理员 bundle exec spree_auth:admin:create 配置七牛云镜像存储与CDN 修改 config/application.yml 文件 default: &default qiniu_domain: "qiniu_domain" qiniu_access_key:...

    Scrum Poker in Rails5, docker-compose

    Rails5引入了许多改进,如Action Cable支持实时通信,Action Text处理富文本编辑,以及更好的API模式。在构建Scrum Poker应用时,我们可以利用这些特性来创建用户界面,处理用户交互,并通过WebSocket实现实时更新。...

    ueditor_port_rails:适用于Rails应用程序的百度百度版

    "ueditor_port_rails" 是一个专门为Rails应用程序设计的组件,它集成了百度的富文本编辑器——Ueditor。"适用于Rails应用程序的百度Ueditor版" 表明这个项目是为了让Ruby on Rails开发者能够方便地在他们的应用中...

    spree_pages:Spree 4.2的Shopify样式页面-内置动作文本

    spree_pages 适用于Spree 4.2及更高版本的Shopify样式...如果您希望将TRIX RTF富文本编辑器中内置的Rails 6与“操作文本”一起用于页面,请设置以下Spree配置,并确保已安装“操作文本”。 如有必要,请参阅本指南

    emerald-jabs:全栈Rails学习管理系统

    PostgreSQL :用于存储用户,会话,文档,图像,帖子和评论SQL数据库Rails :用于创建服务器,连接数据库和提供动态HTML内容的全栈框架活动存储:用于上传文件的云存储笔管编辑器:提供的浏览器内富文本编辑器大虾:...

Global site tag (gtag.js) - Google Analytics