Repository files navigation

Thetinymce-rails gem integrates theTinyMCE editor with the Rails asset pipeline.

This gem is compatible with Rails 5.1 and higher.

This is the branch forTinyMCE 7.
Please see alternate branches forTinyMCE 6,TinyMCE 5,TinyMCE 4 &TinyMCE 3.5.x.

1. Addtinymce-rails to your Gemfile

gem'tinymce-rails'

Be sure to add to the global group, not theassets group. Then runbundle install.

2. Create aconfig/tinymce.yml file with your global configuration options:

toolbar:  -styleselect | bold italic | undo redo  -image | linkplugins:  -image  -link

The Rails server no longer needs to be restarted when this file is updated in development mode.

To define multiple configuration sets, follow this syntax (a default configuration must be specified):

default:&defaultplugins:    -image    -linkalternate:<<:*defaulttoolbar:styleselect | bold italic | undo redo | tableplugins:    -table

See theTinyMCE 7 Documentation for a full list of configuration options.

3. Include the TinyMCE assets

Useone of the following options to include TinyMCE assets.

(1) Add to your application.js (Sprockets only):

//= require tinymce

or (2) add the script tag to your layout using thetinymce_assets helper:

<%= tinymce_assets data: { turbo_track: "reload" }%>#=><scripttype="text/javascript"src="/assets/tinymce.js"data-turbo-track="reload">

When using Propshaft, thetinymce_assets helper adds multiple script tags including the pre-init code (available via thetinymce_preinit helper), as well astinymce/tinymce.js andtinymce/rails.js. You may prefer to selectively include these manually depending on your requirements.

For Sprockets, these are bundled together into one script tag.

4. Initialize TinyMCE

For each textarea that you want to use with TinyMCE, add the "tinymce" class and ensure it has a unique ID:

<%= text_area_tag :content, "", class: "tinymce", rows: 40, cols: 120%>

or if you are using Rails' form builders:

<%= f.text_area :content, class: "tinymce", rows: 40, cols: 120%>

Then invoke thetinymce helper to initialize TinyMCE:

<%= tinymce%>

Custom options can be passed totinymce to override the global options specified inconfig/tinymce.yml:

<%= tinymce theme: "simple", language: "de", plugins: ["wordcount", "paste"]%>

Alternate configurations defined in 'config/tinymce.yml' can be used with:

<%= tinymce :alternate%>

See thetinymce-rails-langs gem for additional language packs for TinyMCE.

Using thetinymce helper and global configuration file is entirely optional. Thetinymce.init JS function can be invoked manually if desired.

<%= text_area_tag :editor, "", rows: 40, cols: 120%><scripttype="text/javascript">tinymce.init({selector:'textarea.editor'});</script>

Since TinyMCE loads most of its files dynamically, some workarounds are required to ensure that the TinyMCE asset files are accessible using non-digested filenames.

As of tinymce-rails 3.5.11, 4.1.10 and 4.2.1, two alternative asset installation methods are available, which can be changed by settingconfig.tinymce.install within yourconfig/application.rb file. These methods are called when you runrake asset:precompile (viaRake::Task#enhance) after the regular application assets are compiled.

The default method (as of 4.5.2),compile, adds the TinyMCE paths to the Sprockets precompilation paths and then creates symlinks from the non-digested filenames to their digested versions.

config.tinymce.install=:compile

If you experience issues with thecompile method, you may wish to use thecopy method instead, which copies the TinyMCE assets directly intopublic/assets and appends the file information into the asset manifest. Thecopy_no_preserve method is also available of you do not wish to or cannot preserve file modes on your filesystem.

config.tinymce.install=:copy

If you are including TinyMCE viaapplication.js or using thetinymce_assets helper, you do not need to manually add the scripts to the Sprockets precompile paths.

To use custom plugins or skins, simply add the files to your asset load path so that they are locatable at a path beneathtinymce/plugins/ ortinymce/skins/.

For example, a plugin calledmycustomplugin could have its main JS file atapp/assets/javascripts/tinymce/plugins/mycustomplugin/plugin.js.

You should also ensure that your custom paths are added to the asset precompile paths.

Ensure that you explicitly requiretinymce-rails within your engine file. Including tinymce-rails as a dependency in your gemspec is not enough.

When new versions of TinyMCE are released, simply update thetinymce-rails gem to the latest version. There is no need to run any extra rake tasks (apart fromrake assets:precompile).