GithubHelp home page GithubHelp logo

ksz2k / rails_tiny_mce Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sandipransing/rails_tiny_mce

2.0 2.0 0.0 2.07 MB

A Tiny MCE Rich text Editor for rails 3 using jquery, paperclip with image and media upload support

Home Page: rails_tiny_mce

License: MIT License

Ruby 100.00%

rails_tiny_mce's Introduction

RailsTinyMCE - A Rich Text Editor for rails 3

TinyMCE is a javascript rich text editor. It is easy to integrate with blogs, cms, messages and mailers.

Plugin uses jrails(jQuery) and Paperclip plugin for image & media upload support

Features

  • Provides Rich Text Editor
  • Customisable TinyMCE plugins
  • Easy to integrate
  • Supports Image upload & insert
  • Supports Media upload & Youtube embed
  • TODO: Document upload plugin
  1. Installation

rails plugin install git://github.com/sandipransing/rails_tiny_mce.git
  1. Migrations

rails g tiny_migration

rake db:migrate
  1. Install jrails(jquery) plugin using

rails plugin install git://github.com/aaronchi/jrails.git
  1. Install dependent plugins(if you did not already)

rake rails_tiny_mce:plugins

Above command will copy paperclip, respond_to_parent, will_paginate plugins to vendor/plugins directory.

  • paperclip git://github.com/thoughtbot/paperclip.git
  • respond_to_parent git://github.com/itkin/respond_to_parent.git
  • will_paginate git://github.com/mislav/will_paginate.git
  1. In your layout add following lines

<%= javascript_include_tag :defaults %>
<%= javascript_include_tiny_mce_if_used %>
<%= tiny_mce if using_tiny_mce? %>
  1. Inside controller class on top add following lines

uses_tiny_mce(:options => AppConfig.default_mce_options, :only => [:new, :edit])

This AppConfig.default_mce_options is in config/initializers/tiny_mce_plus_config.rb, you could change the setting there

  1. In your view add class mceEditor to text_area

Then append the following to the text area you want to transform into a TinyMCE editor. :class => :mceEditor

  1. Install file lists

rake rails_tiny_mce:install

will install following files:

app
  |-- controller
    |-- attachments_controller.rb
  |-- helpers
    |-- remote_link_renderer.rb
  |-- models
    |-- print.rb
    |-- video.rb
  |-- views
    |-- attachments
       |-- _show_attachment_list.html.erb
config
  |-- initializers
    |-- tiny_mce_plus_config.rb
public
  |-- images
    |-- tiny_mce
  |-- javascripts
    |-- tiny_mce

You may custom the config in tiny_mce_plus_config.rb.

Attention Note:

  • Do not put \<p> \</p> around the textarea.
  • If you are using old will_paginate plugin, change the url_for to url_option in remote_link_renderer.rb
  • If you are using
    gem "will_paginate", "~> 3.0.pre2"
    you need changes in app/helpers/remote_link_renderer.rb class RemoteLinkRenderer < WillPaginate::LinkRenderer to class RemoteLinkRenderer < WillPaginate::ViewHelpers::LinkRenderer

Example use:

  • Create CRUD for post

    rails g scaffold post title:string text:description

  • Run Migrations

    rake db:migrate

  • Add following line to posts_controller.rb

    uses_tiny_mce(:options => AppConfig.default_mce_options, :only => [:new, :edit])

  • Open /views/posts/_form.html.erb

  • Modifiy following line

    <%= f.text_area :description %> to <%= f.text_area :description, :class => :mceEditor %>

FAQ

  1. How to get image from post body

    #Add imagepath method in post model def imagepath match = body.match(/img src="(.+)" border/) $1 if match end

And use post.imagepath to get url of image embeded in post content

Contributors

  1. Sandip Ransing, Josh Software Private Limited
  2. ilake

thats, all

any sugestions? sandip at funonrails.com or sandip at joshsoftware.com released under the MIT license

rails_tiny_mce's People

Contributors

antstorm avatar ksz2k avatar nicalpi avatar sandipransing avatar

Stargazers

 avatar  avatar

Watchers

 avatar  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.