레일 웹팩 및 자극js와 함께 TinyMCE를 사용하는 방법
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. 완료 😄 ✌️
Reference
이 문제에 관하여(레일 웹팩 및 자극js와 함께 TinyMCE를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mkhairi/how-to-use-tinymce-with-rails-webpacks-and-stimulusjs-4e4m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)