Trix HTMLSanitizer를 재정의하여 클래스에서 스판 태그를 허용하는 방법

Trix HTMLSanitizer를 재정의하여 클래스에서 스판 태그를 허용하는 방법

trix 에디터에서 span 태그를 클래스와 함께 허용해야 합니다.

span 태그를 추가할 수 있습니다.

 Trix.config.textAttributes.span = {
        tagName: "span",
        inheritable: true
 };

하지만 나는 스팬으로 수업을 받을 수 없다. 그것은 여전히 트릭스에 의해 벗겨지고 있다.HTMLSanitizer인 것 같아요.

저도 한번 해봤는데

 Trix.config.textAttributes.span = {
        tagName: "span",
        inheritable: true,
        parser: false
 };

//and


 Trix.config.textAttributes.span = {
        tagName: "span",
        inheritable: true,
        parser: (element) => {
         element.allowedAttributes = 'class';
        }
 };

트릭스를 어떻게 덮어쓸지 모르겠어HTMLSanitizer를 사용하여<span class="my-class">value</span>편집자 스타일링으로 표시됩니다.

저도 같은 욕구가 있어서 결국 해킹을 이용해서 문제를 해결했습니다.다시 스타일링했습니다..trix-content del컴포넌트입니다.단, 이것은 하나의 커스텀 스타일만 필요한 경우에만 동작합니다.(스트라이커 포맷이 필요없기 때문에 이 태그를 오용(오용)할 수 있었습니다.)

좀 더 좋게 하기 위해, 나는 그 다음, 그 다음, 그 자리를 교체했다.del적절한 태그를 붙이다span class="xxx"Trix 에디터 이외의 장소에 텍스트를 표시할 필요가 있을 때마다 컨텐츠에 표시됩니다.즉, 저는del콘텐츠의 마크업, 저장, 편집/업데이트를 위한 내부 교환span에디터 외부의 사용자에게 표시됩니다.

리치 텍스트 내용 작성 시 강조 표시:

def create
  ...
  object_params[:content].gsub!(/foo/i, '<del>\0</del>')
  ...
end

그런 다음 편집기 외부에서 표시하기 위해 로드하는 경우:

@new_content = @object.content.to_s.gsub(/<del>/i, '<span class="highlight">').gsub(/<\/del>/i, '</span>').html_safe

그리고 SCSS:

// Trix-editor

.trix-content {
  del {
    background-color: $yellow;
    text-decoration: none;
  }
}

.highlight {
  background-color: $yellow;
}

이것은 당신이 필요로 하는 것을 하지 않을 수도 있고, 어떤 경우에도 약간 불쾌합니다.트릭스가 제멋대로를 지원할 수 있다면 좋을 텐데span태그!

(FWIW에서는 텍스트파일을 스캔하여 사용자를 위해 특정 단어를 강조 표시해야 했습니다.)

언급URL : https://stackoverflow.com/questions/58514027/how-to-override-trix-htmlsanitizer-to-allow-span-tags-with-class