Mohd Khairi
Posted on January 29, 2021
Assumed you already setup rails with webpack and stimulusjs 2.0
1. Install TinyMCE
yarn add tinymce
yarn add copy-webpack-plugin@6.4.1
2. Edit config/webpack/enviroment.js and configure copy webpack plugin
const CopyPlugin = require('copy-webpack-plugin')
environment.plugins.prepend(
'Environment',
new webpack.EnvironmentPlugin({
NODE_ENV: process.env.NODE_ENV,
ASSET_PATH: environment.config.output.publicPath
})
)
environment.plugins.prepend(
'Copy',
new CopyPlugin({
patterns: [
{
context: './node_modules/tinymce/',
from: '**/*.(min.js|min.css|woff)',
to: './tinymce/[path][name].[ext]'
}
]
})
)
3. Create a stimulus controller, tinymce_controller.js
// Import TinyMCE
import tinymce from 'tinymce/tinymce'
import { Controller } from 'stimulus'
export default class extends Controller {
static targets = ['input']
initialize () {
this.defaults = {
base_url: process.env.ASSET_PATH + 'tinymce',
plugins:
'print preview paste importcss autolink autosave save directionality code visualblocks visualchars fullscreen image link media table charmap hr pagebreak nonbreaking anchor toc advlist lists imagetools textpattern noneditable help charmap quickbars',
menubar: 'file edit view insert format tools table',
toolbar:
'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist preview | forecolor backcolor removeformat | pagebreak | charmap | insertfile image media link anchor | ltr rtl fullscreen',
toolbar_sticky: true,
suffix: '.min'
//skin: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide'),
//content_css: (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default')
}
}
connect () {
// Initialize the app
let config = Object.assign({ target: this.inputTarget }, this.defaults)
tinymce.init(config)
}
disconnect () {
tinymce.remove()
}
}
4. Example usage in rails form
- Standard form
<%= form_with model: @object do |form| %>
<div data-controller='tinymce'
<%= form.text_area :intro, data: { tinymce_target: 'input' } %>
</div>
<% end %>
- If you using simple form
# create tinymce_input.rb in app/inputs
class TinymceInput < SimpleForm::Inputs::Base
enable :placeholder, :maxlength, :minlength
def input(wrapper_options = nil)
options[:wrapper_html][:data] = { controller: :tinymce }
input_html_options[:data] = { tinymce_target: 'input' }
input_html_options[:class] = 'tinymce'
input_html_options[:rows] ||= 20
merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
@builder.text_area(attribute_name, merged_input_options)
end
end
<%= simple_for(@object) do |f| %>
<%= f.input :intro, as: :tinymce %>
<% end %>
5. Done 😄 ✌️
💖 💪 🙅 🚩
Mohd Khairi
Posted on January 29, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.