一 安裝ckeditor
1 gemfile中增加 gem 'ckeditor'
2 編輯app/assets/javascripts/admin.js? 增加 //= require ckeditor/init
3 編輯app/views/admin/events/_form.html.erb
<%= f.cktext_area :description, ckeditor: { language: 'zh-CN'} %>
如果用simple_form的話,可以用f.input :description, as: :ckeditor
4 編輯config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( admin.css admin.js ckeditor/* )
5 如果覺得默認(rèn)的工具列(toolbar)太復(fù)雜,可以改用 mini toolbar 配置:
app/views/admin/events/_form.html.erb
-? <%= f.cktext_area :description, ckeditor: { language: 'zh-CN'} %>+? <%= f.cktext_area :description, ckeditor: { toolbar: 'mini', language: 'zh-CN'} %>
二 ckeditor中html中增加圖片
1臼氨、
gem 'carrierwave'
gem 'mini_magick'
rails generate ckeditor:install --orm=active_record --backend=carrierwave
bundle install
rake db:migrate
2 就是說在 /lib/tasks目錄下創(chuàng)建個(gè)新的文件ckeditor.rake驯绎,在該文件中添加下面代碼:
lib/tasks/ckeditor.rake
require 'fileutils'
desc "Create nondigest versions of all ckeditor digest assets"
task "assets:precompile" do
fingerprint = /-[0-9a-f]{32}./
for file in Dir["public/assets/ckeditor/*/"]
next unless file =~ fingerprint
nondigest = file.sub fingerprint, '.'
FileUtils.cp file, nondigest, verbose: true
end
end
3洒琢、
class Ckeditor::Picture < Ckeditor::Asset
def self.inheritance_column
nil
end
end
4昌跌、You need to set with true the following variable in the file config/enviroments/production.rb
config.assets.compile = true
and add the following code
config.assets.precompile += Ckeditor.assets
config.assets.precompile += %w(ckeditor/* )
config.autoload_paths += %W(/app/models/ckeditor)
5 上傳圖片還是失敗
執(zhí)行 bundle update ckeditor秉撇,重啟服務(wù)器夫凸,
不能上傳一致轉(zhuǎn)...
6
git commit后,回退到上一個(gè)commit夭拌,但是某些文件沒有刪除魔熏,public下的
git reset --hard HEAD~1
7 參考https://richonrails.com/articles/getting-started-with-ckeditor
使用paperclip
gem"paperclip"
rails generate ckeditor:install--orm=active_record--backend=papercliprake db:migrate
再執(zhí)行 rake db:migrate
提示relation"ckeditor_assets" already exists
表在上一步中創(chuàng)建了,沒有刪除干凈鸽扁,所以提示錯(cuò)誤蒜绽,在數(shù)據(jù)庫(kù)pg管理界面直接刪除(git reset 回滾不能回滾數(shù)據(jù)庫(kù))
再執(zhí)行 rake db:migrate,成功
8 用paperclip還是一樣錯(cuò)誤,回退 git reset
還用carr..
9 最后的最后桶现,用了一個(gè)真正的圖片傳上去了.....!!!!...!!
測(cè)試服務(wù)器通過了
10 正式部署
執(zhí)行RAILS_ENV="production" rake db:migrate
在重啟nginx,成功6阊拧!巩那!
三 插入附件
ckeditor本身就有這個(gè)功能
點(diǎn)“插入/編輯超鏈接”吏夯,再點(diǎn)“上傳”選項(xiàng)卡此蜈,選文件后點(diǎn)“上傳到服務(wù)器上”,然后在超鏈接信息中寫上 鏈接名稱
相關(guān)問題:
1 上傳1.7mb的圖片受限制噪生,一直轉(zhuǎn)裆赵,不能上傳
修改nginx限制 在/opt/nginx/conf/nginx.conf中修改配置文件,在使用的 server 配置中加上一條命令
client_max_body_size 50m跺嗽;??
上傳大小上限為50m
2 更改編輯框大小
在config.js的CKEDITOR.editorConfig = function(config)中設(shè)置config.height = 400;
很多屬性都是在這里設(shè)置
生產(chǎn)環(huán)境要重啟nginx
注意:更改后在火狐瀏覽器上不生效战授,清除火狐緩存好了(不用重啟瀏覽器)
3 拖拽添加圖片問題
圖片可以直接拖進(jìn)去,但瀏覽時(shí)不能顯示桨嫁,