레일 웹팩 및 자극js와 함께 TinyMCE를 사용하는 방법

이미 webpack과 Stimulusjs 2.0으로 레일을 설정했다고 가정합니다.

1. TinyMCE 설치




yarn add tinymce
yarn add [email protected]


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





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. 자극 컨트롤러 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. 레일 형식의 사용 예


  • 표준 양식

  • <%= 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 %>
    


    5. 완료 😄 ✌️

    좋은 웹페이지 즐겨찾기