当前位置: 首页 > news >正文

使用 ckeditor gem

安装

1.vim Gemfile

对于基本用法,只需包含 ckeditor gem:
gem 'ckeditor'
gem 'paperclip'

2. 运行

$ bundle install

3. 运行

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

4. 在config/initializers/assets.rb:

Rails.application.config.assets.precompile += %w[ckeditor/config.js]

5. 在 config/application.rb

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

6. 在 config/routes.rb(有可能运行完第三步之后会自动生成)

mount Ckeditor::Engine => '/ckeditor'

7. 在 config/initializers/ckeditor.rb

Ckeditor.setup do |config|# //cdn.ckeditor.com/<version.number>/<distribution>/ckeditor.js#增加下面这一行config.cdn_url = "//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"
end

8. 在 app/views/layouts/application.html.erb (以下四种可以根据自己的喜好添加)

1). 这个是基本的文本编辑器的形式:(不能在文章中复制粘贴图片)
javascript_include_tag Ckeditor.cdn_url
2). 标准:
<script src="//cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
3). 基本:
<script src="//cdn.ckeditor.com/4.19.0/basic/ckeditor.js"></script>
4). 完整:
<script src="//cdn.ckeditor.com/4.19.0/full/ckeditor.js"></script>

9. 在视图页面增加form helpers

 <%= f.cktext_area :content %>

做完上面几步, 再去浏览器刷新页面,ckeditor应该就差不多了。

http://www.lryc.cn/news/108179.html

相关文章:

  • Windows环境下Node.js二进制版安装教程
  • Spring中的注解装配
  • 深度优先搜索|130, 200
  • go-resty
  • 香港服务器速度不稳定的原因有哪些
  • 企业架构NOSQL数据库之MongoDB
  • 鸟哥马哥共叙Linux发展
  • OpenCV中常用算子
  • Android 11.0 系统限制上网系列之iptables用IOemNetd实现app某个时间段禁止上网的功能实现
  • 【JavaSE】面向对象编程思想之继承
  • Golang make和new的区别
  • (前后端交互式)Ajax上传图片 + 更换背景图片
  • 自媒体常见玩法
  • 【react】react生命周期钩子函数:
  • CRM系统哪些功能可以个性化定制?
  • 51单片机(普中HC6800-EM3 V3.0)实验例程软件分析 实验二 LED闪烁
  • PaperEdge 文档图像矫正
  • 入门NLTK:Python自然语言处理库初级教程
  • Android 死机问题学习笔记
  • 企业内网终端安全无客户端准入控制技术实践
  • Android 开发代码规范
  • c语言(函数)
  • OPENCV C++(二)直方图+分离颜色通道+画圆画线画矩形
  • SpringBoot(2.7.x)中使用PageHelper
  • 【HarmonyOS】API9网络buffer图片加载
  • 【前端实习生备战秋招】—HTML 和 CSS面试题总结(二)
  • 操作系统知识点总结
  • (C++) 多线程之生产者消费者问题
  • 【C语言学习】逃逸字符(转义字符)
  • 开发手册|Java后端开发规范重点条目整理