Forem: Mohd Khairi

How to use TinyMCE with rails esbuild and stimulusjs

Mohd Khairi — Tue, 06 Sep 2022 14:12:39 +0000

My previous post How to use TinyMCE with rails webpacks and stimulusjs looked at how to integrate the full-featured text editor TinyMCE into a Rails+webpacker with copy webpack plugin feature.

What does copy-webpack-plugin do?. It was designed to copies individual files or entire directories, which already exist, to the build directory. In this context for tinyMCE we going to copy all tinyMCE assets including plugins css/js to our build directory. so we can flexible load each plugins on demand without having to bundling all plugins assets into one compiled assets

In this article I'm going to shared on how we can setup the same approach above by using esbuild as default assets bundler

Assumed you already setup rails+esbuild+stimulusjs with custom esbuild config enabled

1. Install TinyMCE and esbuild-plugin-copy

yarn add tinymce
yarn add esbuild-plugin-copy

2. Edit/create `esbuild.config.mjs` and configure esbuild plugin copy config

#!/usr/bin/env node

const { build } = require('esbuild')
const { copy } = require('esbuild-plugin-copy')
const path = require('path')

build({
  ....
  plugins: [
    copy({
      resolveFrom: path.join(process.cwd(), 'public/assets'),
      assets: [
        {
          from: [
            './node_modules/tinymce/**/*.js',
            './node_modules/tinymce/**/*.css'
          ],
          to: ['./tinymce'],
          keepStructure: true
        }
      ]
    })
  ]
  ...
})
  .then(() => console.log('⚡ Build complete! ⚡'))
  .catch(error => {
    console.error(error)
    process.exit(1)
  })

see sample config

3. Create a stimulus controller, tinymce_controller.js

Configure plugin definition and other tinymce option. Please refer tinyMCE documentation for more option.

import tinymce from 'tinymce/tinymce'

import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
  static targets = ['input']

  initialize() {
    this.defaults = {
      base_url: '/assets/tinymce',
      plugins:
        'preview importcss autolink autosave save directionality code visualblocks visualchars fullscreen image link media table charmap pagebreak nonbreaking anchor advlist lists 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,
      images_upload_url: '/image_uploader/image',
      file_picker_types: 'file image media',
      suffix: '.min',
      relative_urls: false
      //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 %>

Live Demo

How to use TinyMCE with rails webpacks and stimulusjs

Mohd Khairi — Fri, 29 Jan 2021 04:54:45 +0000

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 😄 ✌️

Extend Rails ActiveStorage disk service for multitenant

Mohd Khairi — Tue, 26 May 2020 10:30:21 +0000

If you using Apartment and use ActiveStorage disk as a storage service, you might want to organise storage folder per-tenant or something like this:

storage/tenant1/
storage/tenant2/
storage/other_tenant/

This can be achieved by extending the default ActiveStorage disk service class

# lib/active_storage/service/tenant_service.rb
# extend disk service
require "active_storage/service/disk_service"

module ActiveStorage
  class Service::TenantService < Service::DiskService 
    def path_for(key) 
      current_tenant = Apartment::Tenant.current
      File.join root, current_tenant, folder_for(key), key
    end
  end
end

Change storage config for local using new service previously created

# config/storage.yml
test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Tenant
  root: <%= Rails.root.join("storage") %>

** Don't forget to restart rails server

Benefits:

Easy to cleanup storage when tenant dropped

Apartment::Tenant.drop('tenant_name')
`rm -rf storage/tenant_name`

check disk usage per tenant
per tenant backup?

Forem: Mohd Khairi

How to use TinyMCE with rails esbuild and stimulusjs

1. Install TinyMCE and esbuild-plugin-copy

2. Edit/create esbuild.config.mjs and configure esbuild plugin copy config

3. Create a stimulus controller, tinymce_controller.js

4. Example usage in rails form

How to use TinyMCE with rails webpacks and stimulusjs

1. Install TinyMCE

2. Edit config/webpack/enviroment.js and configure copy webpack plugin

3. Create a stimulus controller, tinymce_controller.js

4. Example usage in rails form

5. Done 😄 ✌️

Extend Rails ActiveStorage disk service for multitenant

2. Edit/create `esbuild.config.mjs` and configure esbuild plugin copy config