JavaScript 在 rails 3.2.3 中加入 ckediter 的详细步骤

boardsky · April 19, 2012 · Last by runup replied at September 16, 2013 · 5623 hits

试了很久终于在 rails 3.2.3 中装上了 cKediter 环境: ubuntu linux 11.10 ruby 1.9.2 p290 rails 3.2.3

详细步骤如下:

1.在 Gemfile 文件中加上 gem 'mime-types', '~> 1.17.2' gem 'ckeditor', :git => "https://github.com/galetahub/ckeditor.git" gem 'paperclip' 之后执行 bundle install,如果出现相关的依赖信息,请根据信息来操作。

2.接着执行 rails generate ckeditor:install,过程如下:

3.执行 rails generate ckeditor:install --orm=active_record --backend=paperclip,过程如下:

4.创建 ckediter 所需要的数据表,执行 rake db:migrate,自动创建依赖的数据表

5.将一下代码放到你的视图表单要放置的地方

<%= javascript_include_tag "ckeditor/ckeditor.js" %>

<%= f.cktext_area("content",:width => '100%') %>

我的程序中是这样的

6.然后重启你的项目,在项目的根目录下执行 rails s

7.去浏览器看看效果吧,下图是我的界面显示的效果。

That‘s all!

我也曾配置过,没有报错,纠结的是显示不出那个富文本编辑栏。

可以 参照 rails_admin 的 ckeditor 配置

本人还是新手,关于 rails 的 gem 包我想在还没有去研究过,我想先把基础的,至少原理要明白!求高人指点!

錯誤訊息是什麼?

我也是运行例子是好的,但是在 windows 中的步骤真是太复杂了 希望高手们总结个详细的步骤 让俺们这些新手省点时间学习更好玩的 rails

上传中文名称附件不显示名称,下载预览也不正常,修改成数字或英文正常,如图 这个怎么解决?

#7 楼 @u1331878576 ckeditor 配置起来比较麻烦,我上次虽然安装了,但是一直出现这样那样的问题,我现在改用 kindeditor 了,配置方便好用,你不妨试试。 github:https://github.com/Macrow/rails_kindeditor 设置成英文版 加上 :langType => 'en',如下所示: <%= f.kindeditor :content, :width => 670, :height => 400, :langType => 'en' %>

#8 楼 @boardsky 恩,已经试了,谢谢

我的方法完全一样,不过是 windows 下,怎么会是这个样子呢。楼主还有什么其他步骤/ 总是所方法没有定义

#10 楼 @kaitokid1224 这个步骤在 ubuntu 里面没什么问题。 看看你的其他的地方,有没有问题,比如说字段漏写,拼写错误等等!

这东西不用 gem 也行吧 百度出的一个不错 http://ueditor.baidu.com/website/onlinedemo.html

#12 楼 @kikyous 没用过这个! 我只试了一下 ckeditor 和 kindediter,kindereditor 用起来比较方便,符合我的需求!

看来很给力哦!有机会试试!

CKEditor 在 Rails4 目前不能用。

不过使用其他方法,还是能用。

http://my.eoe.cn/guanmac/archive/5806.html

@ boardsky 您好,我得到的是这种效果,html 标签直接现实在页面上,不知道是因为原因,求指教!谢谢。 @hz_qiuyuanxin @273 ruby_sky

#8 楼 @boardsky 您好,我安装了您推荐的插件,当时发现我发表文章的时候那些内容的 html 标签也会显示在页面上面,请教原因。

#18 楼 @runup

你需要把内容转换一下,如:

# controller 
@article = Article.first

# View
<div><%= @article.content.html_safe %></div>

http://thekaiway.com/2013/08/17/actionview-safe-buffer/

#19 楼 @hz_qiuyuanxin 问题解决了,就是内容装换,前面加 raw 也是可以达到这种效果,非常感谢。

You need to Sign in before reply, if you don't have an account, please Sign up first.