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

简介:

 

Ckeditor

https://github.com/galetahub/ckeditor

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

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

 

功能

整合rails3.2

支持文件文件浏览

HTML5的文件上传

 

 

安装

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

 

打开Gemfile,加入


 
 
  1. gem 'ckeditor', '3.7.3' 

执行下面的命令安装gem。


 
 
  1. bundle install  

文件上传需要配合paperclip

在Gemfile中加入


 
 
  1. gem 'paperclip', '~> 3.0' 

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

执行


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

在config/applicaiton.rb中加入


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

在config/routes.rb中加入


 
 
  1. mount Ckeditor::Engine => '/ckeditor' 

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

在config/environments/production.rb中加入


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

然后执行


 
 
  1. rake assets:precompile 

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

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


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

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


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

在view页面中加入


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

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

 

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

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


 
 
  1. <p> 
  2.   <b>Content:</b> 
  3.   <%= raw @post.content %> 
  4. </p> 

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




本文转自 virusswb 51CTO博客,原文链接:http://blog.51cto.com/virusswb/1048421,如需转载请自行联系原作者

目录
相关文章
|
存储 编译器 数据库
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV核心类型 Mat
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV核心类型 Mat
116 1
|
4月前
|
数据采集 运维 监控
运维笔记:流编辑器sed命令用法解析
运维笔记:流编辑器sed命令用法解析
59 5
|
计算机视觉
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV视频lO接口
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV视频lO接口
235 0
|
文字识别 算法 计算机视觉
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV图像处理
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV图像处理
165 1
|
编译器 计算机视觉
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV vs2015编译
[笔记]OpenCV+FFmpeg+Qt实现视频编辑器之OpenCV vs2015编译
100 0
|
数据库连接 测试技术 开发工具
猿创征文|工具百宝箱-编辑器-笔记工具-日常小工具-原型设计工具
猿创征文|工具百宝箱-编辑器-笔记工具-日常小工具-原型设计工具
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(2)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
138 0
|
数据安全/隐私保护
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(1)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
133 0
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
219 0
|
Web App开发 JavaScript 前端开发
CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置
CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置
298 0