[ruby on rails]ckeditor使用

• Install ckeditor

#用4.3.0版本较好，新的5.0.0感觉没这个好用
gem 'ckeditor', '4.3.0'

Include this inside your config/initializers/assets.rb:

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

Include this inside your app/assets/javascripts/application.js:

//= require ckeditor/init

ActiveRecord + carrierwave

gem 'carrierwave'
gem 'mini_magick'

rails generate ckeditor:install --orm=active_record --backend=carrierwave

Mount the Ckeditor::Engine in your routes (config/routes.rb):

mount Ckeditor::Engine => '/ckeditor'

• Form helpers

= form_for @page do |form|
  = form.cktext_area :notes, class: 'someclass', ckeditor: { language: 'uk'}
  = form.cktext_area :content, value: 'Default value', id: 'sometext'
  = cktext_area :page, :info, cols: 40, ckeditor: { uiColor: '#AADC6E', toolbar: 'mini' }

• Customize ckeditor
  没有就自己新建

app/assets/javascripts/ckeditor/config.js

app/assets/javascripts/ckeditor/contents.css

config.js:

CKEDITOR.editorConfig = function (config) {
  #添加了几个插件，行高、首行缩进、调整图像宽高、加强图像
  config.extraPlugins = 'lineheight,textindent,imageresizerowandcolumn,image2';
  config.line_height = "1;1.5;2;2.5;3;3.5;4;4.5;5";
  CKEDITOR.plugins.setLang('lineheight', 'zh-cn', {
    title: '行距'
  });
  CKEDITOR.plugins.setLang('textindent', 'zh-cn', {
    labelName: '段首空2格'
  });
  CKEDITOR.plugins.setLang( 'image2', 'zh-cn', {
    alt: '替换文本',
    btnUpload: '上传到服务器',
    captioned: '带标题图像',
    captionPlaceholder: '标题',
    infoTab: '图像信息',
    lockRatio: '锁定比例',
    menu: '图像属性',
    pathName: '图像',
    pathNameCaption: '标题',
    resetSize: '原始尺寸',
    resizer: '点击并拖拽以改变尺寸',
    title: '图像属性',
    uploadTab: '上传',
    urlMissing: '缺少图像源文件地址',
    altMissing: '缺少替换文本'
  } );
  // Define changes to default configuration here. For example:
  config.language = 'zh-cn';
  config.uiColor = '#AADC6E';
  /* Filebrowser routes */
  config.enterMode = CKEDITOR.ENTER_BR;
  config.shiftEnterMode = CKEDITOR.ENTER_P;
  config.indentation = '2em';
  config.fillEmptyBlocks = false;
  config.startupFocus = true;
  config.indentOffset = 2;
  config.indentUnit = 'em';
  config.font_names = '宋体/宋体 ;黑体/黑体 ;仿宋/仿宋_GB2312 ;楷体/楷体_GB2312 ;隶书/隶书 ;幼圆/幼圆 ;微软雅黑/微软雅黑 ;' + config.font_names;
  config.font_defaultLabel = '宋体';
  config.fontSize_defaultLabel = '16px';

  // The location of an external file browser, that should be launched when "Browse Server" button is pressed.
  config.filebrowserBrowseUrl = "/ckeditor/attachment_files";

  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog.
  config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";

  // The location of a script that handles file uploads in the Flash dialog.
  config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";

  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog.
  config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";

  // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog.
  config.filebrowserImageBrowseUrl = "/ckeditor/pictures";

  // The location of a script that handles file uploads in the Image dialog.
  config.filebrowserImageUploadUrl = "/ckeditor/pictures?";

  // The location of a script that handles file uploads.
  config.filebrowserUploadUrl = "/ckeditor/attachment_files";

  config.allowedContent = true;

  // Toolbar groups configuration.
  config.toolbar = [

    {
      name: 'document',
      groups: ['mode', 'document', 'doctools'],
      items: ['Source', 'textindent']
    },
    {
      name: 'clipboard',
      groups: ['clipboard', 'undo'],
      items: ['Undo', 'Redo', '-', 'CopyFormatting', 'Cut', 'Copy', '-']
    },
    // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    {
      name: 'links',
      items: ['Link', 'Unlink']
    },
    {
      name: 'insert',
      items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar']
    },
    {
      name: 'paragraph',
      groups: ['list', 'indent', 'blocks', 'align', 'bidi'],
      items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
    },
    '/',
    {
      name: 'styles',
      items: ['Format', 'Font', 'FontSize', 'lineheight']
    },
    {
      name: 'colors',
      items: ['TextColor', 'BGColor']
    },
    {
      name: 'basicstyles',
      groups: ['basicstyles', 'cleanup'],
      items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']
    }
  ];

  config.toolbar_mini = [{
      name: 'paragraph',
      groups: ['list', 'indent', 'blocks', 'align', 'bidi'],
      items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
    },
    {
      name: 'styles',
      items: ['Font', 'FontSize']
    },
    {
      name: 'colors',
      items: ['TextColor', 'BGColor']
    },
    {
      name: 'basicstyles',
      groups: ['basicstyles', 'cleanup'],
      items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']
    },
    {
      name: 'insert',
      items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar']
    }
  ];
};

contents.css自己在github上扒下来

• SimpleForm integration

= form.input :content, as: :ckeditor, input_html: { ckeditor: { toolbar: 'Full' } }

• Turbolink integration

Create a file app/assets/javascripts/init_ckeditor.coffee and Make sure the file is loaded from your app/assets/javascripts/application.js

ready = ->
  $('.ckeditor').each ->
    CKEDITOR.replace $(this).attr('id')

$(document).ready(ready)
$(document).on('page:load', ready)

• CanCanCan integration
  To use cancan with Ckeditor, add this to an initializer:

# in config/initializers/ckeditor.rb

Ckeditor.setup do |config|
  config.authorize_with :cancancan
end

At this point, all authorization will fail and no one will be able to access the filebrowser pages. To grant access, add the following abilities (usually ability.rb)

# Always performed
can :access, :ckeditor   # needed to access Ckeditor filebrowser

# Performed checks for actions:
can [:read, :create, :destroy], Ckeditor::Picture
can [:read, :create, :destroy], Ckeditor::AttachmentFile

• I18n

en:
  ckeditor:
    page_title: 'CKEditor Files Manager'
    confirm_delete: 'Delete file?'
    buttons:
      cancel: 'Cancel'
      upload: 'Upload'
      delete: 'Delete'
      next: 'Next'

-错误解决

1. Uncaught TypeError: Cannot read property ‘langEntries’ of null
   办法：把你插件里的lang文件夹下的其他语言xx.js都删除掉，zh-cn.js的里头内容复制到你的config.js配置文件里，把zh-cn.js也删掉

2. plugins xxx is already …
   办法：你自己下载的插件和gem里的插件重复了，从plugins文件夹中把对应的插件删除