Rails integration

Seamlessly integrates TinyMCE into the Rails asset pipeline.

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

TinyMCE in Ruby on Rails using the Tiny Cloud
TinyMCE in Ruby on Rails using TinyMCE self-hosted
The third-party TinyMCE Ruby on Rails gem

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:

Create a new Ruby on Rails project.
```
 rails new myTinySite
```
Navigate into the project directory.
```
 cd myTinySite/
```
Create a new Rails controller, such as:
```
 rails generate controller Welcome index
```
This creates a controller named Welcome with an action named index.
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
```

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>

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" %>
```
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:

Create a new Ruby on Rails project.
```
 rails new myTinySite
```
Navigate into the project directory.
```
 cd myTinySite/
```
Create a new Rails controller, such as:
```
 rails generate controller Welcome index
```
This creates a controller named Welcome with an action named index.
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
```

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>

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" %>
```
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: Installing TinyMCE.

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:

Create a new Ruby on Rails project.
```
 rails new myTinySite
```
Navigate into the project directory.
```
 cd myTinySite/
```
Create a new Rails controller, such as:
```
 rails generate controller Welcome index
```
This creates a controller named Welcome with an action named index.
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
```
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.
Install the tinymce-rails gem using bundle:
```
 bundle install
```

Create a TinyMCE configuration file.

Create the config/tinymce.yml file:
```
touch config/tinymce.yml
```

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

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>
```
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 %>
```
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.

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

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.