Встроенный стиль вместо встроенных в редактор quill редакторов, так как классы недоступны для визуализации HTML - PullRequest
Новая
       40

Встроенный стиль вместо встроенных в редактор quill редакторов, так как классы недоступны для визуализации HTML

0 голосов
/ 10 января 2020

Я использую ngx-quill редактор в качестве моего текстового редактора в моем проекте angular. Так что я могу сохранить сгенерированный им HTML в БД и затем отобразить его в разных браузерах как inner HTML. Поскольку он не использует inline CSS и есть атрибут класса для стиля HTML, который ссылается на встроенные классы этого редактора. Я хочу отобразить HTML на платформе, где эти встроенные классы недоступны.

Как отобразить HTML на странице, где эти встроенные классы недоступны?

ИЛИ

Есть ли способ конвертировать эти классы во встроенные стили?

ИЛИ

и, если какие-либо другие параметры для рендеринга HTML сохранены этим редактором с применением стиля к этому?

Любая помощь будет оценена

1 Ответ

0 голосов
/ 28 апреля 2020

Это определенно возможно. Мне удалось это сделать, но не Angular способом, поэтому в итоге я использую только quill, а не ngx-quill. Я пытался выяснить, как настроить ngx-quill, чтобы отразить это, но пока безуспешно.

В любом случае, если вы хотите узнать, как я это делаю в настоящее время.

Сначала я создать элемент html: 

<div id="editor"></div>

Затем я добавляю это в начало моего компонента: 

 import Quill from 'quill'
var DirectionAttribute = Quill.import('attributors/attribute/direction');
Quill.register(DirectionAttribute, true);
var AlignClass = Quill.import('attributors/class/align');
Quill.register(AlignClass, true);
var BackgroundClass = Quill.import('attributors/class/background');
Quill.register(BackgroundClass, true);
var ColorClass = Quill.import('attributors/class/color');
Quill.register(ColorClass, true);
var DirectionClass = Quill.import('attributors/class/direction');
Quill.register(DirectionClass, true);
var FontClass = Quill.import('attributors/class/font');
Quill.register(FontClass, true);
var SizeClass = Quill.import('attributors/class/size');
Quill.register(SizeClass, true);
var AlignStyle = Quill.import('attributors/style/align');
Quill.register(AlignStyle, true);
var BackgroundStyle = Quill.import('attributors/style/background');
Quill.register(BackgroundStyle, true);
var ColorStyle = Quill.import('attributors/style/color');
Quill.register(ColorStyle, true);
var DirectionStyle = Quill.import('attributors/style/direction');
Quill.register(DirectionStyle, true);
var FontStyle = Quill.import('attributors/style/font');
Quill.register(FontStyle, true);
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(SizeStyle, true);

И затем в моем методе init я объявляю это: 

  ngOnInit() {
this.editor = new Quill('#editor', {
  modules: {
    'toolbar': [
      [{ 'font': [] }, { 'size': [] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'script': 'super' }, { 'script': 'sub' }],
      [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      ['direction', { 'align': [] }],
      ['link', 'image', 'video']
    ]
  },
  theme: 'snow'
})

}

И затем, куда бы я ни захотел прочитать содержание: 

this.email.message = this.editor.root.innerHTML

Конечно, это не совсем идеально, и я предпочитаю много кода иметь внутри компонента. Может быть, кто-то еще может помочь сжать это в компоненте

...