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/initActiveRecord + carrierwave
gem 'carrierwave' gem 'mini_magick' rails generate ckeditor:install --orm=active_record --backend=carrierwaveMount 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.cssconfig.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 integrationCreate 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 endAt 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'-错误解决
Uncaught TypeError: Cannot read property ‘langEntries’ of null 办法：把你插件里的lang文件夹下的其他语言xx.js都删除掉，zh-cn.js的里头内容复制到你的config.js配置文件里，把zh-cn.js也删掉
plugins xxx is already … 办法：你自己下载的插件和gem里的插件重复了，从plugins文件夹中把对应的插件删除
