Как переопределить Trix HTMLSanitizer, чтобы разрешить теги span с классом - PullRequest
Новая
       119

Как переопределить Trix HTMLSanitizer, чтобы разрешить теги span с классом

1 голос
/ 23 октября 2019

Мне нужно разрешить тег span с классом в редакторе trix.

Я мог бы добавить тег span к 

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

Но я не могу получить класс на span, он все ещеПолагаю, что Trix.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';
        }
 };

Не могу понять, как переопределить Trix.HTMLSanitizer, чтобы разрешить отображение чего-то вроде <span class="my-class">value</span>в стиле редактора.

1 Ответ

0 голосов
/ 01 ноября 2019

У меня возникла такая же потребность, и я решил использовать хак для решения проблемы: я повторно ввел элемент .trix-content del в CSS. Это работает, только если вам нужен только один собственный стиль. (Я мог сделать это, потому что мне не нужно форматирование зачеркивания, поэтому я мог (ab) использовать этот тег.)

Чтобы сделать его лучше, я заменил тег del на правильный * 1005. * в содержании всякий раз, когда мне нужно было отобразить текст где-либо, кроме самого редактора 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;
}

Это может не делать то, что вам нужно, и в любом случае немного неприятно. Было бы здорово, если бы Trix мог поддерживать произвольные теги span!

(FWIW, мне нужно было отсканировать текстовый файл и выделить определенные слова для пользователя.)

...