Important changes to Tiny Cloud pricing > Find out more

Rails integration

Seamlessly integrates TinyMCE into the Rails asset pipeline.

Contribute to this page

TinyMCE can be added to a Ruby on Rails project using either:

TinyMCE in Ruby on Rails using the Tiny Cloud

The Tiny Cloud can be used to integrate TinyMCE into Ruby on Rails projects. This procedure creates a basic Ruby on Rails application containing a TinyMCE editor based on our Basic example.

Prerequisites

This procedure requires the following programs:

Procedure

On a command line or command prompt:

  1. Create a new Ruby on Rails project.

     rails new myTinySite
    
  2. Navigate into the project directory.

     cd myTinySite/
    
  3. Create a new Rails controller, such as:

     rails generate controller Welcome index
    

    This creates a controller named Welcome with an action named index.

  4. Set the project home page to index.

    1. Using a text editor, open config/routes.rb, such as:

      nano config/routes.rb
      
    2. Add root 'welcome#index' to set index as the project home page. For example:

      Rails.application.routes.draw do
        get 'welcome/index'
      
        root 'welcome#index'
      end
      
  5. Add the following lines within the <head> element of app/views/layouts/application.html.erb to automatically include TinyMCE on pages using the application layout:

     <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
       tinymce.init({
         selector: '.tinymce',
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
           toolbar: 'undo redo | formatselect | ' +
           ' bold italic backcolor | alignleft aligncenter ' +
           ' alignright alignjustify | bullist numlist outdent indent |' +
           ' removeformat | help'
       });
     </script>
    
  6. Create a <textarea> with the initial content Hello, World! for TinyMCE by adding the following lines to app/views/welcome/index.html.erb:

     <%= text_area_tag :content, "Hello, World!", :class => "tinymce" %>
    
  7. On a command line, from the project’s root directory, start the Ruby on Rails server.

     rails server
    

The page containing the TinyMCE will be accessible at http://localhost:<port>/ (default: http://localhost:3000/).

TinyMCE in Ruby on Rails using TinyMCE self-hosted

Self-hosted instances of TinyMCE can be integrated into Ruby on Rails projects. This procedure creates a basic Ruby on Rails application containing a TinyMCE editor based on our Basic example.

Prerequisites

This procedure requires the following programs:

Procedure

On a command line or command prompt:

  1. Create a new Ruby on Rails project.

     rails new myTinySite
    
  2. Navigate into the project directory.

     cd myTinySite/
    
  3. Create a new Rails controller, such as:

     rails generate controller Welcome index
    

    This creates a controller named Welcome with an action named index.

  4. Set the project home page to index.

    1. Using a text editor, open config/routes.rb, such as:

      nano config/routes.rb
      
    2. Add root 'welcome#index' to set index as the project home page. For example:

      Rails.application.routes.draw do
        get 'welcome/index'
      
        root 'welcome#index'
      end
      
  5. Add the following lines within the <head> element of app/views/layouts/application.html.erb to automatically include TinyMCE on pages using the application layout:

     <script src="/path/to/tinymce.min.js"></script>
     <script>
       tinymce.init({
         selector: '.tinymce',
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
           toolbar: 'undo redo | formatselect | ' +
           ' bold italic backcolor | alignleft aligncenter ' +
           ' alignright alignjustify | bullist numlist outdent indent |' +
           ' removeformat | help'
       });
     </script>
    
  6. Create a <textarea> with the initial content Hello, World! for TinyMCE by adding the following lines to app/views/welcome/index.html.erb:

     <%= text_area_tag :content, "Hello, World!", :class => "tinymce" %>
    
  7. On a command line, from the project’s root directory, start the Ruby on Rails server.

     rails server
    

    The page containing the TinyMCE will be accessible at http://localhost:<port>/ (default: http://localhost:3000/).

For information on self-hosting TinyMCE, see: Advanced installation choices.

The third-party TinyMCE Ruby on Rails gem

Important: This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly.

Sam Pohlenz maintains the TinyMCE Ruby on Rails gem for integrating TinyMCE into the Ruby on Rails asset pipeline. This procedure creates a basic Ruby on Rails application containing a TinyMCE editor based on our Basic example.

Prerequisites

This procedure requires the following programs:

Procedure

On a command line or command prompt:

  1. Create a new Ruby on Rails project.

     rails new myTinySite
    
  2. Navigate into the project directory.

     cd myTinySite/
    
  3. Create a new Rails controller, such as:

     rails generate controller Welcome index
    

    This creates a controller named Welcome with an action named index.

  4. Set the project home page to index.

    1. Using a text editor, open config/routes.rb, such as:

      nano config/routes.rb
      
    2. Add root 'welcome#index' to set index as the project home page. For example:

      Rails.application.routes.draw do
        get 'welcome/index'
      
        root 'welcome#index'
      end
      
  5. Using a text editor, open the project Gemfile and add the line:

     gem 'tinymce-rails'
    

    Do not add this line within a group - end element.

  6. Install the tinymce-rails gem using bundle:

     bundle install
    
  7. Create a TinyMCE configuration file.

    1. Create the config/tinymce.yml file:

      touch config/tinymce.yml
      
    2. Add a TinyMCE configuration. The configuration must be in the YAML format, such as:

      height: 500
      menubar: false
      toolbar:
        - undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help
      plugins:
        - advlist autolink lists link image charmap print preview anchor
        - searchreplace visualblocks code fullscreen
        - insertdatetime media table paste code help wordcount
      
  8. Add the following lines within the <head> element of app/views/layouts/application.html.erb to automatically include TinyMCE on pages using the application layout:

     <%= tinymce_assets %>
     <script type="text/javascript" src="/assets/tinymce.js"></script>
    
  9. Create a <textarea> with the initial content Hello, World! for TinyMCE by adding the following lines to app/views/welcome/index.html.erb:

     <%= text_area_tag :content, "Hello, World!", :class => "tinymce" %>
     <%= tinymce %>
    
  10. On a command line, from the project’s root directory, start the Ruby on Rails server.

     rails server
    

The page containing the TinyMCE will be accessible at http://localhost:<port>/ (default: http://localhost:3000/).

For information on creating advanced configurations for the third-party TinyMCE Ruby on Rails integration, visit the project on GitHub: Rails Integration for TinyMCE.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.