Belajar Ruby on Rails: CKeditor Pada Aplikasi Ruby on Rails Lanjutan

Langkah – langkah untuk menambahkan plugins youtube adalah sebagai berikut :

1. Tambahkan require di bawah ini pada file app/assets/javascripts/application.js

//= require ckeditor/init

2. Buatlah file dan tambahkan config dibawah ini pada :
app/assets/javascripts/ckeditor/config.js

CKEDITOR.editorConfig = Function (config) {
  config.extraPlugins = ‘youtube’;
}

3. Buatlah file dan tambahkan icon dibawah ini pada :
app/assets/javascripts/ckeditor/plugins/youtube/images/icon.png

4. Buatlah file dan tambahkan lang dibawah ini untuk bahasa :

Untuk bahasa inggris tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/en.js

Code :

CKEDITOR.plugins.setLang(‘youtube’, ‘en’, {
  button : ‘Embed Youtube Video’,
  title : ‘Embed Youtube Video’,
  txtEmbed : ‘Paste Embed Code Here’,
  txtUrl : ‘Paste Youtube Video URL’,
  txtWidth : ‘Width’,
  txtHeight : ‘Height’,
  chkRelated : ‘Show suggested videos at the video\’s end’,
  txtStartAt : ‘Start at (ss or mm:ss or hh:mm:ss)’,
  chkPrivacy : ‘Enable privacy-enhanced mode’,
  chkOlderCode : ‘Use old embed code’,
  noCode : ‘You must input an embed code or URL’,
  invalidEmbed : ‘The embed code you\’ve entered doesn\’t appear to be valid’,
  invalidUrl : ‘The URL you\’ve entered doesn\’t appear to be valid’,
  or : ‘or’,
  noWidth : ‘You must inform the width’,
  invalidWidth : ‘Inform a valid width’,
  noHeight : ‘You must inform the height’,
  invalidTime : ‘Inform a valid start time’
});

Untuk bahasa jepang tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/ja.js

Code :

CKEDITOR.plugins.setLang(‘youtube’, ‘ja’, {
  button : ‘Youtube動画埋め込み’,
  title : ‘Youtube動画埋め込み’,
  txtEmbed : ‘埋め込みコードを貼り付けてください’,
  txtUrl : ‘URLを貼り付けてください’,
  txtWidth : ‘幅’,
  txtHeight : ‘高さ’,
  chkRelated : ‘動画が終わったら関連動画を表示する’,
  txtStartAt : ‘Start at’,
  chkPrivacy : ‘プライバシー強化モードを有効にする’,
  chkOlderCode : ‘以前の埋め込みコードを使用する’,
  noCode : ‘埋め込みコードまたはURLを入力してください’,
  invalidEmbed : ‘不適切な埋め込みコードが入力されました’,
  invalidUrl : ‘不適切なURLが入力されました’,
  or : ‘または’,
  noWidth : ‘幅を指定してください’,
  invalidWidth : ‘幅指定に誤りがあります’,
  noHeight : ‘高さを指定してください’,
  invalidHeight : ‘高さ指定に誤りがあります’,
  invalidTime : ‘Inform a valid start time’
});

Untuk bahasa portugis tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/pt.js

Code :

CKEDITOR.plugins.setLang(‘youtube’, ‘pt’, {
  button : ‘Inserir Vídeo do Youtube’,
  title : ‘Inserir Vídeo do Youtube’,
  txtEmbed : ‘Cole aqui o código embed de um vídeo do Youtube’,
  txtUrl : ‘Cole aqui uma URL de um vídeo do Youtube’,
  txtWidth : ‘Largura’,
  txtHeight : ‘Altura’,
  chkRelated : ‘Mostrar vídeos sugeridos ao final do vídeo’,
  txtStartAt : ‘Iniciar em (ss ou mm:ss ou hh:mm:ss)’,
  chkPrivacy : ‘Ativar o modo de privacidade aprimorada’,
  chkOlderCode : ‘Usar código de incorporação antigo’,
  noCode : ‘Você precisa informar um código embed ou uma URL’,
  invalidEmbed : ‘O código informado não parece ser válido’,
  invalidUrl : ‘A URL informada não parece ser válida’,
  or : ‘ou’,
  noWidth : ‘Você deve informar a largura do vídeo’,
  invalidWidth : ‘Informe uma largura válida’,
  noHeight : ‘Você deve informar a altura do vídeo’,
  invalidHeight : ‘Informe uma altura válida’,
  invalidTime : ‘O tempo informado é inválido’
});

5. Buatlah file dan tambahkan plugins dibawah ini pada : 
app/assets/javascripts/ckeditor/plugins/youtube/plugins.js 

6. Tambahkan ckeditor pada file assets config/initializers/assets.rb

Rails.application.config.assets.precompile +=%w(ckeditor/* )

7. Tampilan pada ckeditor 

8. Pada saat icon ‘youtube’ di click akan tampil seperti dibawah ini. 

Untuk menampilkan video pada website kita, diperlukan URL video youtube dan paste pada column ‘Paste Youtube Video URL’.
Cari tahu lebih banyak tentang tutorial Ruby on Rails di Belajar Ruby on Rails