Rails笔记《三》富文本编辑器Ckeditor

 

Ckeditor

https://github.com/galetahub/ckeditor

ckeditor是一款嵌入网页的富文本编辑器，是一种所见即所得的编辑器，就是你编辑的时候看见的样式，就是将来显示的样式。

自带了常见的文本编辑功能。

 

功能

整合rails3.2

支持文件文件浏览

HTML5的文件上传

 

 

安装

下面的安装过程适用于ruby1.9.3+rails3.2.8.

 

打开Gemfile，加入

gem 'ckeditor', '3.7.3'

执行下面的命令安装gem。

bundle install

文件上传需要配合paperclip。

在Gemfile中加入

gem 'paperclip', '~> 3.0'

再次执行bundle install，或者在paperclip的项目首页查看具体的安装过程。

执行

rails generate ckeditor:install --orm=active_record --backend=paperclip

在config/applicaiton.rb中加入

config.autoload_paths += %W(#{config.root}/app/models/ckeditor)

在config/routes.rb中加入

mount Ckeditor::Engine => '/ckeditor'

上面这句也可能已经添加好了，如果没有，就自行添加即可。

在config/environments/production.rb中加入

config.assets.precompile += ['ckeditor/*']

然后执行

rake assets:precompile

查看public/assets/ckeditor目录是否存在，里面是否生成cs文件和js文件。

在app/views/layouts/application.html.erb或者是你的模板文件中的head部分加入

<%= javascript_include_tag "ckeditor/ckeditor" %>

保证你的网页中生成的javascript引用为

<script type="text/javascript" src="/assets/ckeditor/ckeditor-a985aea0d2afea8d57038a46fd5e5e05.js">

在view页面中加入

<div class="field">
    <%= f.label :content %><br/>
    <%= f.cktext_area :content, :toolbar => 'Full', :width => 800, :height => 400 %>
  </div>

现在打开你的网页，你会发现富文本编辑器已经起作用了。

 

你把控件的内容保存起来，将来显示用，但是显示的时候要需要注意一点。因为保存的是带有html标记的文本，不是纯文本，不能直接显示，否则显示的内容中就会包含大量的html标签。

要用下面的方式显示带有html标签的文本，这样才可以看到想要的效果。

<p>
  <b>Content:</b>
  <%= raw @post.content %>
</p>

要在显示内容前面加上一个raw。