Git Product home page Git Product logo

ckeditor-rails's Introduction

CKEditor for rails asset pipeline

CKEditor is a library for WYSIWYG editor to be used inside web pages.

The ckeditor_rails gem integrates the CKEditor with the Rails asset pipeline.

And it would work with following environments:

  • ruby 1.9.3+
  • rails 3.0+

Basic Usage

Install ckeditor_rails gem

Include ckeditor_rails in Gemefile

gem 'ckeditor_rails'

Then run bundle install

Include CKEditor javascript assets

Add to your app/assets/javascripts/application.js after //= require jquery_ujs to work with jQuery

//= require ckeditor-jquery

Modify form field for CKEditor

Add ckeditor class to text area tag

<%= f.text_area :content, :class => 'ckeditor' %>

Advanced Usage

Include customized configuration javascript for CKEditor

Add your app/assets/javascripts/ckeditor/config.js.coffee like

CKEDITOR.editorConfig = (config) ->
  config.language = "zh"
  config.uiColor = "#AADC6E"
  true

Include customized CKEDITOR_BASEPATH setting

Add your app/assets/javascripts/ckeditor/basepath.js.coffee like

<%
  base_path = ''
  if ENV['PROJECT'] =~ /editor/i
    base_path << "/#{Rails.root.basename.to_s}/"
  end
  base_path << Rails.application.config.assets.prefix
  base_path << '/ckeditor/'
%>
var CKEDITOR_BASEPATH = '<%= base_path %>';

Include customized stylesheet for contents of CKEditor

Add your app/assets/stylesheets/ckeditor/contents.css.scss like

body {
  font-size: 14px;
  color: gray;
  background-color: yellow;
}
ol,ul,dl {
  *margin-right:0px;
  padding:4 20px;
}

Gem maintenance

Maintain ckeditor_rails gem with Rake commands.

Update origin CKEditor source files.

rake update_ckeditor VERSION=4.1.1

Publish gem.

rake release

License

CKEditor use CKEditor license.

Other parts of gem use MIT license.

ckeditor-rails's People

Contributors

bricker avatar eric1234 avatar tsechingho avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.