css 内联样式而不是quill编辑器内置类,因为此时类不可用于呈现HTML

ioekq8ef  于 2023-02-26  发布在  其他
关注(0)|答案(2)|浏览(272)

我正在使用ngx-quill编辑器作为我的富文本编辑器在我的Angular 项目。所以我可以保存它生成的HTML在DB中,然后呈现它在不同的浏览器作为innerHTML。因为它没有使用内联CSS,并有一个类属性来样式化HTML,它引用了这个编辑器的内置类。我想呈现这个HTML的平台上,这些内置类是不可用的。
如何在这些内置类不可用的页面上呈现HTML?

有没有办法把这些类转换成内联样式?

是否有其他选项来呈现由该编辑器保存并应用了样式的HTML?
任何帮助都将不胜感激

jhiyze9q

jhiyze9q1#

这绝对是可能的。我设法做到了,但不是在一个Angular 的方式,所以在最后我只使用羽毛笔,而不是ngx-羽毛笔。我一直试图找出如何调整ngx-羽毛笔,以反映这一点,但还没有成功。
无论如何,如果你想知道我现在是怎么做的。
首先创建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

当然,这一点也不理想,而且我更喜欢将大量代码放在组件中,也许其他人可以帮助将其压缩到组件中

7cwmlq89

7cwmlq892#

对于ngx-quill,您可以像这样导入属性,然后使用样式属性:
在您的 typescript 中:

customOptions: CustomOption[] = [{
  import: 'attributors/style/size',
  whitelist: ['12px', '20px', '24px']
  },
  // You can import additional attributors for alignments, colors etc. here
];

在您的html中:

<quill-editor [customOptions]="customOptions">....

相关问题