首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网络技术 > 网络基础 >

rails ckeditor 装配与使用

2012-12-23 
rails ckeditor 安装与使用rails ckeditor 安装与使用?安装?首先下载ckeditor插件?https://github.com/gal

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  endend?

?

模型文件

?

?

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  endend

?

?

?

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.megabytesend
?

?

这些文件用来管理上传图片和文件,将如片的信息,路径存储到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,要先删图片,再删新闻。

?

1 楼 jinleileiking 2010-11-18   嗯,以前搞过,顶一个。 2 楼 ywencn 2010-11-19   以前搞过,现在换kindeditor了, ck在IE下的模样实在惨不忍睹....

热点排行