Rails esbuild 및 stimulusjs와 함께 TinyMCE를 사용하는 방법

내 이전 게시물은 모든 기능을 갖춘 텍스트 편집기 TinyMCE를 복사 webpack 플러그인 기능이 있는 Rails+webpacker에 통합하는 방법을 살펴보았습니다.

copy-webpack-plugin은 무엇을 합니까?. 이미 존재하는 개별 파일 또는 전체 디렉토리를 빌드 디렉토리에 복사하도록 설계되었습니다. tinyMCE에 대한 이 컨텍스트에서 플러그인 css/js를 포함한 모든 tinyMCE 자산을 빌드 디렉토리에 복사합니다. 따라서 모든 플러그인 자산을 하나의 컴파일된 자산으로 묶지 않고도 필요에 따라 각 플러그인을 유연하게 로드할 수 있습니다.

이 기사에서는 esbuild를 기본 자산 번들러로 사용하여 위와 동일한 접근 방식을 설정하는 방법에 대해 공유할 것입니다.

활성화된 상태로 rails+esbuild+stimulusjs를 이미 설정했다고 가정합니다.

1. TinyMCE 및 esbuild-plugin-copy 설치

yarn add tinymce
yarn add esbuild-plugin-copy

2. esbuild.config.js 편집/생성 및 esbuild 플러그인 복사 구성 구성

#!/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. 자극 컨트롤러 tinymce_controller.js 생성

플러그인 정의 및 기타 tinymce 옵션을 구성합니다. 더 많은 옵션은 tinyMCE 문서를 참조하십시오.

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. 레일 형식의 사용 예

표준 양식

<%= form_with model: @object do |form| %>
  <div data-controller='tinymce'
     <%= form.text_area :intro, data: { tinymce_target: 'input' } %>
  </div>
<% end %>

간단한 양식을 사용하는 경우

# 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 %>