over 3 years ago

系統:

  • Mac OS X Yosemite 10.10.3
  • Ruby 2.1.6
  • Rails 4.2.1

相關連結

前言

研究了多種 Rails 所見即所得的編輯器,最後筆者靠向了 TinyMCE,它除了該有的都有,也支援客製化自己想要的功能按鈕,最重要的是,已經有大大把它轉化為 Gem ( 例如本篇採用 Gem 的作者 spohlenz ),造福了所有的 Rails 開發者。

設定步驟如下

1. Gemfile 設定

添加必要的 gem 套件至 Gemfile 檔中

gem 'tinymce-rails', git: 'https://github.com/ChouAndy/tinymce-rails.git'

之後,執行以下指令安裝以上的 gems

$ bundle install

2. 新增檔案: config/tinymce.yml

檔案內容如下,包括了所有常用的功能,當然可以參考 官網範例 做修改。

config/tinymce.yml
toolbar:
  - fullscreen | newdocument | undo redo | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | link unlink image media | emoticons | hr nonbreaking
  - formatselect | fontsizeselect | bold italic underline strikethrough | subscript superscript | forecolor backcolor | removeformat | code preview
plugins:
  - advlist
  - autolink
  - lists
  - link
  - image
  - charmap
  - preview
  - hr
  - anchor
  - searchreplace
  - visualblocks
  - visualchars
  - code
  - fullscreen
  - insertdatetime
  - media
  - nonbreaking
  - table
  - contextmenu
  - emoticons
  - textcolor
  - colorpicker
menubar: false

3. 加入 TinyMCE assets

使用任一種方式即可:

(1) TinyMCE without jQuery

app/assets/javascripts/application.js
//= require tinymce

(2) TinyMCE with jQuery

app/assets/javascripts/application.js
//= require tinymce-jquery

(3) 在任一 View 中載入

<%= tinymce_assets %>

4. 使用方式

在要引用 TinyMCE 功能的 textarea 加入 class tinymce,如下:

<%= f.text_area :content, class: 'tinymce', rows: 40, cols: 120 %>

之後在載入 tinymce Helper method 初始化 TinyMCE

<%= tinymce %>

5. 搞定!

如果設定正確,應該可以看到以下的編輯文字區塊!

← OS X Yosemite 10.10.2 安裝 MySQL 5.5
 
comments powered by Disqus