rails ckeditor 安装与使用

rails ckeditor 安装与使用

 

安装

 

首先下载ckeditor插件 https://github.com/galetahub/rails-ckeditor

 

将插件放到vendor目录下，并把JavaScripts下的ckeditor文件夹放到项目public的javascripts下

 

安装成功，这样就能使用了。

 

使用

 

迁移文件   20100731013242_create_assets

 

class CreateAssets < ActiveRecord::Migration
  def self.up
    create_table :assets, :options=>"charset=utf8" do |t|
      t.string  :data_file_name
      t.string  :data_content_type
      t.integer :data_file_size

      t.integer :assetable_id
		  t.string  :assetable_type, :limit=>25
      t.string  :type, :limit=>25

		  t.integer :information_id
      t.string :information_type
      t.timestamps
    end
    add_index "assets", ["assetable_id", "assetable_type", "type"], :name => "ndx_type_assetable"
		add_index "assets", ["assetable_id", "assetable_type"], :name => "fk_assets"
  end

  def self.down
    drop_table :assets
  end
end 

 

模型文件

 

 

class Asset < ActiveRecord::Base

  # === List of columns ===
  #   id                : integer
  #   data_file_name    : string
  #   data_content_type : string
  #   data_file_size    : integer
  #   assetable_id      : integer
  #   assetable_type    : string
  #   type              : string
  #   locale            : integer
  #   user_id           : integer
  #   created_at        : datetime
  #   updated_at        : datetime
  # =======================

  belongs_to :assetable, :polymorphic => true

  def url(*args)
    data.url(*args)
  end
  alias :public_filename :url

  def filename
    data_file_name
  end

  def content_type
    data_content_type
  end

  def size
    data_file_size
  end

  def path
    data.path
  end

  def styles
    data.styles
  end

  def format_created_at
    I18n.l(self.created_at, :format=>"%d.%m.%Y %H:%M")
  end

  def to_xml(options = {})
    xml = options[:builder] ||= Builder::XmlMarkup.new(:indent => options[:indent])

    xml.tag!(self.type.to_s.downcase) do
      xml.filename{ xml.cdata!(self.filename) }
      xml.size self.size
      xml.path{ xml.cdata!(self.url) }

      xml.styles do
        self.styles.each do |style|
          xml.tag!(style.first, self.url(style.first))
        end
      end unless self.styles.empty?
    end
  end
end

 

 

 

class AttachmentFile < Asset

  # === List of columns ===
  #   id                : integer
  #   data_file_name    : string
  #   data_content_type : string
  #   data_file_size    : integer
  #   assetable_id      : integer
  #   assetable_type    : string
  #   type              : string
  #   locale            : integer
  #   user_id           : integer
  #   created_at        : datetime
  #   updated_at        : datetime
  # =======================

  has_attached_file :data,
                    :url => "/assets/attachments/:id/:filename",
                    :path => ":rails_root/public/assets/attachments/:id/:filename"

  validates_attachment_size :data, :less_than=>10.megabytes
end

 

 

这些文件用来管理上传图片和文件，将如片的信息，路径存储到assets表里

 

 

迁移数据库即可

 

视图

 

引入ckeditor

 

<script type="text/javascript" src="/javascripts/ckeditor/ckeditor.js"></script>

 

 

rails代码

 

<%= f.ckeditor_textarea :admin_news, :content%>

 

 其中 admin_news为对象,content为字段名

 

这样就能用了！

 

工具栏

 

工具栏里的按钮默认按照配置文件config.js里的配置。

可以在一下文件里更改按钮以及位置、增减。

 

 

config.toolbar= [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Smiley','SpecialChar'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
    ['Link','Unlink'], ['Image','Table','HorizontalRule'],
    '/',
    ['Styles','Format','Font','FontSize'], 
    ['TextColor','BGColor'], 
    ['ShowBlocks','ImageButton'],
    ];

 

 

精简工具栏

 

 

config.toolbar_Basic =
[
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
    ['Link','Unlink'],
    '/',
    ['Styles','Format','Font','FontSize'], 
    ['TextColor','BGColor'], 
];

 

 

这样使用精简工具栏

 

 

<%= f.ckeditor_textarea :enterprise, :summary,:toolbar => "Basic"%>

 

 汉化

 

据说是在配置文件里做如下设置：

config.language = 'zh-cn';

 

却怎么试都没成功，无奈之下，将lang里zh-cn.js的文件copy到en.js中，并把所有的全删除

 

成功！

 

上传图片

 

插件已经能上传图片，但是图片自动保存都硬盘上，内容里只有一个路径，删除的时候，图片会留在服务器上，因此

要将图片信息保存在另外一张表中。

在assets表里增加新闻id字段，可以存储图片属于哪条新闻，利用正则表达式从内容里抽取出图片的路径存入表中，并把新闻id一并存入。

将一下方法放到create里，save之后

 

  def news_picture(string, news_id)
    regex = /[\/][\d]+[\/]/
    string1 = string.scan(regex).to_s
    regex1 = /[\d]+/
    picture = string1.scan(regex1)
    for i in picture do
      @picture = Asset.find_by_id(i.to_i)
      @picture.information_id = news_id
      @picture.information_type = '新闻'
      @picture.save
    end
  end

 

当删除时

#删除图片
  def delete_picture(id)
    @news_picture = Asset.find(:all, :conditions => ["information_id = ? and information_type = ?", id, "新闻"])
    unless @news_picture.blank?
      @news_picture.each do |picture|
        picture.destroy
        FileUtils.rmtree("RAILS_ROOT/public/assets/picturs/#{picture.id}/")  if File.exists? "RAILS_ROOT/public/assets/picturs/#{picture.id}"
      end
    end
  end

 放在destroy方法里，传入id，要先删图片，再删新闻。

 

评论

2 楼 ywencn 2010-11-19  

以前搞过,现在换kindeditor了, ck在IE下的模样实在惨不忍睹....

1 楼 jinleileiking 2010-11-18  

嗯，以前搞过，顶一个。