3

我在我的 Angular 项目中使用ngx-quill编辑器作为富文本编辑器。这样我就可以将它生成的 HTML 保存在 DB 中，然后在不同的浏览器上将其呈现为innerHTML。因为它没有使用内联 CSS，并且有一个 class 属性来设置 HTML 样式，它引用了这个编辑器的内置类。我想在这些内置类不可用的平台上呈现这个 HTML。

如何在这些内置类不可用的页面上呈现 HTML？

或者

有没有办法将这些类转换为内联样式？

或者

以及是否有任何其他选项来呈现此编辑器保存的 HTML 并应用了样式？

任何帮助，将不胜感激

4

1 回答 1

6

这绝对是可能的。我设法做到了，但不是以 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

当然，这根本不理想，而且我更喜欢在组件中包含很多代码。也许其他人可以帮助将其压缩到组件中

于 2020-04-28T08:19:40.513 回答