Peditor

功能

Peditor是發表文章用的圖文編輯器。

文章由段落構成，使用者可以直接拖曳段落來調整文章的內容呈現。

目前Peditor包含的段落種類有：文字段落、圖片段落、影片段落、清單段落。

• 文字段落

  支援段落的修改、刪除及增加連結網址功能讓段落具有超連結效果。

  可以視需要加入字體分類、字體顏色或字體大小清單，調整段落的文字樣式。

• 圖片段落

  支援上傳圖片至文章內文以及圖片的刪除。

  圖片可以增加連結網址。

• 影片段落

  支援嵌入來自YouTube或Vimeo的影片。

• 清單段落

  可以在文章中新增<ul>清單。支援清單子項目<li>的修改。

使用說明

Gemfile加上需要用到的gem

• jquery-ui-rails

  段落拖曳排序, 在/app/assets/javascripts/application.js中加入:

  //= require jquery.ui.sortable

• carrierwave

  圖片上傳

• mini_magick

  調整圖片設定值

• remotipart

  /app/assets/javascripts/application.js中加入:

  //= require jquery.remotipart

編輯頁面(edit)

• 建立圖文編輯器UI及功能：

  $(document).ready(function(){ 
    editor.init();
    //可以傳入setting參數
    //例如：editor.init( { articleModel : "news" , photoModel : "newsphoto" } );
  });

• Peditor設定及預設值

  文章model名稱 - articleModel: "article",
  照片model名稱 - photoModel: "photo",
  照片model存放路徑欄位 - photoColumn: "image",
  文章controller中上傳圖片的action - photoUpload: "uploadPhoto",
  文章controller中刪除圖片的action - photoDestroy: "deletePhoto",
  是否提供文字段落超連結 - linkedp: true,
  是否提供圖片段落超連結 - linkedimg: true,
  
  （不生成清單：設定為false）
  文字段落加入分類清單 - paragraphFontClass: { "內文": "content", "標題": "title" },
  文字段落加入字體色彩清單 - paragraphFontColor: { "顏色": "default", "黑色": "#000", "藍色": "#00F" },
  文字段落加入字體大小清單 - paragraphFontSize: { "大小": "default", 14:14, 28:28 }

顯示頁面(show)

• 顯示文章內容內容：

  $(document).ready(function(){
    editor.output();
  });