Rails 6.1 ActionText에서 Trix를 Tinymce로 교체

요약:
Trix를 교체하려면 ActionText를 사용하면 안 됩니다. 그것은 일종의 작동하지만 필요하지 않은 편집 텍스트 주변의 "trix-content"블록과 같은 많은 Trix 관련 콘텐츠를 추가합니다.

가장 쉬운 방법은 모델에 text 필드를 추가하고 뷰에서 <%= sanitize content %>를 사용하는 것입니다.

Tinymce는 설치가 매우 쉬웠습니다. 여기에서 내 요약을 참조하십시오.

Trix는 범위가 매우 제한되어 있고 요소에 속성을 추가하는 것을 허용하지 않기 때문에(예를 들어 링크에 target="_blank"를 추가하여 새 탭에서 열 수 없음) 클래스를 추가하고 일반적으로 적극적으로 유지 관리되지 않는 것 같기 때문에 일반적으로 많은 문제가 있습니다. 다른 옵션을 찾는 것이 좋습니다.

주변을 둘러본 후 Trix를 Tinymce로 교체하는 실험을 시작했지만 ActionText를 유지하는 것이 합당한지 궁금했습니다.

Reddit Thread에서 나에게 추천한 TinyMCE로 Trix를 교체하는 것은 놀라울 정도로 쉬웠습니다.

내 스택:

레일 6.1.4

루비 3.0

esbuild가 포함된 jsbundling-rails

터보 및 자극

package.json에 tinymce를 추가하고 실행하기만 하면 됩니다yarn install.

모든 텍스트 필드에 쉽게 추가할 수 있도록 Tinymce를 Stimulus 컨트롤러에 래핑하려고 합니다.
rails generate stimulus tinymce
이렇게 하면 모든 텍스트 필드가 Tinymce 편집기가 됩니다.

import tinymce from 'tinymce/tinymce'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/models/dom';

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="tinymce"
export default class extends Controller {
  connect() {
    tinymce.init({
      selector: 'textarea',  // change this value according to your HTML
    });
  }

  disconnect () {
    tinymce.remove()
  }
}

그런 다음 자극 컨트롤러를 캡슐화 블록에 추가하고 rich_text_area를 text_area로 변경합니다(여기서는 HAML 및 Tailwind를 사용하는 내 보기).

    .flex.flex-col.gap-3.mb-3
      = f.label :add_text_block, class: "font-bold text-xl"
      = f.rich_text_area :text, class: "", id: "editor_#{block.id}"

    .flex.flex-col.gap-3.mb-3{ data: { controller: "tinymce" } }
      = f.label :add_text_block, class: "font-bold text-xl"
      = f.text_area :text, class: "", id: "editor_#{block.id}"

이제 보기에 Trix 편집기 대신 Tinymce 편집기가 표시됩니다. 가장 좋은 점은 모든 변경 사항이 자동으로 저장된다는 것입니다. 따라서 모델의 has_rich_text :text는 다른 편집자와도 작동합니다.

이제 Tinymce에 링크와 이미지를 추가하는 방법과 특성 및 클래스로 요소를 사용자 지정하는 방법을 알아내야 합니다. Trix가 저에게 효과가 없었던 주된 이유입니다.

따라서 다음 단계는 플러그인이 Tinymce와 어떻게 작동하는지 파악하는 것입니다.

플러그인도 매우 쉽게 추가할 수 있습니다. 가져오기:

import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/image';

초기화 프로그램에서 사용자 정의하십시오.

      plugins: 'link image',  // note the comma at the end of the line!
      toolbar: 'h2 link image',