Giter Site home page Giter Site logo

tinymce_fm's Introduction

TinymceFm gem (v0.0.2) (previously - TinymceFilemanager plugin)

TinyMCE wrapper, that takes care of managing media files (images, videos) and links within your application.

It will be published as official gem after some tests, etc.

Installation

This plugin requires mini_magic gem to work (so also - imagemagick binaries installed on server).

If you want, you can also manage multimedia files (ie. videos), but then you will need to have ffmpeg installed on your machine (thumb generation).

  1. Add gem to you Gemfile:

    gem 'tinymce_fm', :git=>"git://github.com/galdomedia/tinymce_fm.git"
    
  2. Add Engine to routes.rb file:

    Freshmag::Application.routes.draw do
      # TinymceFm Engine
      mount TinymceFm::Engine => "/tinymce_fm"
    
      # ...
     root :to=>"welcome#index"
    end
    
  3. Add include line in controller that will manage images ( controller Pages for example )

    include TinymceFm::Filemanager
    
  4. In layout (best in page <head> section) add:

    <%= tinymce_javascript_tag "pages" %>

    where “pages” is name of controller from last step

    The theme defaults to tinymce_filemanager’s “advanced” theme flavour however you can pass an additional parameter to the tinymce_managed_javascript_tag which will allow you to use a custom theme or the provided simple theme.

    <%= tinymce_javascript_tag "pages", "simple" %>
  5. Add tag in form:

    <%= tinymce_tag "some_field_name", "some field content" %>

    or use builder method:

    <%= f.tinymce :some_field_name %>

Basic Usage

controller “pages”:

class PagesController < ApplicationController
  include TinymceFm::Filemanager
  def index
  ...
end

application layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    ...
    <%= tinymce_javascript_tag "pages" %>
    ...
  </head>
  <body>
    ...
  </body>
</html>

optional theme:

The theme defaults to tinymce_filemanager’s “advanced” theme flavour however you can pass an additional parameter to the tinymce_managed_javascript_tag which will allow you to use a custom theme or the provided simple theme.

<%= tinymce_javascript_tag "pages", "simple" %>

pages new view:

<h1>New page</h1>  
<% form_for(@page) do |f| %>
<%= f.error_messages %>
  ...
  <p>
    <%= f.label :body %><br />
    <%= f.tinymce :body %>
  </p>
  ...
  <p>
    <%= f.submit  "Create" %>
  </p>
<% end %>

<%= link_to 'Back', pages_path %>

Sample Configuration

for “pages” controller

class PagesController < ApplicationController

  include TinymceFm::Filemanager

  # accept only jpeg and gif for images
  image_accept_mime_types ['image/jpeg', 'image/gif', 'image/png']

  # limit image file size to 2MB
  image_file_size_limit 2.megabytes

  # accept only mpeg and flash files(swf) for media
  media_accept_mime_types ['video/mpeg', 'application/x-shockwave-flash']

  # limit media file size to 15MB
  media_file_size_limit 15.megabytes

  #thumbs created into '_small_' subdir
  thumbs_subdir 'small'

  #images save to RAILS_ROOT/public/manager/images thumbs in RAILS_ROOT/public/manager/images/_small_
  image_save_into_public_subdir 'manager/images'

  #images save to RAILS_ROOT/public/manager/images thumbs in RAILS_ROOT/public/manager/images/_small_
  media_save_into_public_subdir 'manager/media'

  #classes of objects, that can be browsed through LinkBrowser (separate by comma for multiple classes)
  link_classes_accepted [Page,Category] 

  ...

end

TODO

  • link browser should accept chained queries (ie. Page.where(‘visible=?’,true).order(‘updated_at DESC’) )

  • tests!

Special Thanks

Copyright © 2011 Galdomedia, Leszek Smentek and Maciej Litwiniuk, released under the MIT license

tinymce_fm's People

Contributors

mlitwiniuk avatar

Stargazers

Lol kek avatar

Watchers

James Cloos avatar Lol kek 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.