2.安装 imagemagick (linux下)
$ sudo apt-get install imagemagick
3.编辑Gemfile 文件
gem 'carrierwave' gem 'mini_magick' gem 'ckeditor'
4.在终端中输入
$ rails generate ckeditor:install --orm=active_record --backend=carrierwave
5.在application.js 或者 application.js.erb文件中:
//= require ckeditor/init
6.在终端中输入
$ bundle exec rake db:migrate
7.在对应的编辑页面中引用ckeditor编辑器
<%= form_for @article do |f| %> <%= f.cktext_area :introduction %> <% end %>
注意,做完上面几步, ckeditor是出来了,但是还没有 "上传文件" 这个功能
add this file to : app/assets/javascripts/ckeditor/config.js
/* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = 'zh-CN'; config.height='600px'; // config.uiColor = '#AADC6E'; /* Filebrowser routes */ // 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"; // Rails CSRF token config.filebrowserParams = function(){ var csrf_token, csrf_param, meta, metas = document.getElementsByTagName('meta'), params = new Object(); for ( var i = 0 ; i < metas.length ; i++ ){ meta = metas[i]; switch(meta.name) { case "csrf-token": csrf_token = meta.content; break; case "csrf-param": csrf_param = meta.content; break; default: continue; } } if (csrf_param !== undefined && csrf_token !== undefined) { params[csrf_param] = csrf_token; } return params; }; config.addQueryString = function( url, params ){ var queryString = []; if ( !params ) { return url; } else { for ( var i in params ) queryString.push( i + "=" + encodeURIComponent( params[ i ] ) ); } return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" ); }; // Integrate Rails CSRF token into file upload dialogs (link, image, attachment and flash) CKEDITOR.on( 'dialogDefinition', function( ev ){ // Take the dialog name and its definition from the event data. var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; var content, upload; if (CKEDITOR.tools.indexOf(['link', 'image', 'attachment', 'flash'], dialogName) > -1) { content = (dialogDefinition.getContents('Upload') || dialogDefinition.getContents('upload')); upload = (content == null ? null : content.get('upload')); if (upload && upload.filebrowser && upload.filebrowser['params'] === undefined) { upload.filebrowser['params'] = config.filebrowserParams(); upload.action = config.addQueryString(upload.action, upload.filebrowser['params']); } } }); };
之后就可以在页面中看到ckeditor 编辑器了。
参考(web.siwei.tech)