rails 富文本编辑器kindeditor以及haml写法

rails_kindeditor可以帮助你的rails程序集成kindeditor编辑器,包括了文本编辑和格式设置,图片和附件上传功能,文件按照类型、日期进行存储。

 

1,安装:

(1)将下面代码加入Gemfile:

  gem 'rails_kindeditor'

(2)运行"bundle"命令:

  bundle install

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

  rails generate rails_kindeditor:install

(4)从Rails 4.0开始, precompiling assets不再自动从vendor/assets和lib/assets拷贝非JS/CSS文件. 参见 https://github.com/rails/rails/pull/7968 如果要使用Rails 4.0的生产模式,请运行'rake kindeditor:assets', 此方法可将kindeditor自动拷贝到你的public/assets目录.

rake kindeditor:assets

2,使用方法:

其实就是一个form表单其中用ruby表示:

<%= form_for @article do |f| -%>
  
       <%= f.kindeditor :content %>
       # or <%= f.kindeditor :content, :width => 800, :height => 300 %>
       # or <%= f.kindeditor :content, :allowFileManager => false %>
       ...
     <% end -%>
  注掉的两行和第二行是一样的就是稍微设置了一下格式,三个用哪个都行

 用haml表示:

 

= form_for :@content_object,:url=>{:action=>'save_editor'},:method => "post" do |f|

  = f.kindeditor :content
  = f.text_field :title=f.submit "提交"

   这里我加了一个标题title和submit提交按钮,注意@content_object是一个空对象用来装form表单中的内容

,即在表单对应的contruller中加入:@content_object={}即可

这个时候已经可以在页面上显示编辑器。

3,存储(我的数据库是mysql)

在你该项目对应的数据库中建表kindeditor(名字随你自己起)

也就是在终端打两条命令:

(1),创建模型:$ bin/rails generate model Kindeditor title:string text:text

(2),运行迁移:$ bin/rake db:migrate

到这里表就建好啦。

 

这是我的kindeditor编辑器的controller仅供参考:

def kindeditor
    @content_object={}


  end
  def save_editor
    
    @kind=params[:@content_object]
    editor = Activity.find_by_title(params[:@content_object][:title])
    if editor
      editor.update({:title => params[:@content_object][:title], :content => params[:@content_object][:co       ntent]})
      redirect_to '/guests_title_list/activity_list'
    else
     
      if @kind[:title]== "" || @kind[:content] == ""
        redirect_to '/admin/kindeditor'
      else
        @new_editor = Activity.new({:title => params[:@content_object][:title], :content => params[:@cont        ent_object][:content]})
        @new_editor.save
        redirect_to '/guests_title_list/activity_list'
      end
    end

  end

 

 

猜你喜欢

转载自13473996167.iteye.com/blog/2278099