Rails integration
Seamlessly integrates TinyMCE into the Rails asset pipeline.
Contribute to this pageTinyMCE 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 namedindex
. -
Set the project home page to
index
.-
Using a text editor, open
config/routes.rb
, such as:nano config/routes.rb
-
Add
root 'welcome#index'
to setindex
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 ofapp/views/layouts/application.html.erb
to automatically include TinyMCE on pages using theapplication
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 contentHello, World!
for TinyMCE by adding the following lines toapp/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 namedindex
. -
Set the project home page to
index
.-
Using a text editor, open
config/routes.rb
, such as:nano config/routes.rb
-
Add
root 'welcome#index'
to setindex
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 ofapp/views/layouts/application.html.erb
to automatically include TinyMCE on pages using theapplication
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 contentHello, World!
for TinyMCE by adding the following lines toapp/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 namedindex
. -
Set the project home page to
index
.-
Using a text editor, open
config/routes.rb
, such as:nano config/routes.rb
-
Add
root 'welcome#index'
to setindex
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 usingbundle
: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 ofapp/views/layouts/application.html.erb
to automatically include TinyMCE on pages using theapplication
layout:<%= tinymce_assets %> <script type="text/javascript" src="/assets/tinymce.js"></script>
-
Create a
<textarea>
with the initial contentHello, World!
for TinyMCE by adding the following lines toapp/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.