gpt4 book ai didi

css - 内联样式而不是 quill 编辑器内置类,因为类在渲染 HTML 时不可用

转载 作者:行者123 更新时间:2023-12-04 12:40:38 24 4
gpt4 key购买 nike

我正在使用 ngx-羽毛笔编辑器作为我的 angular 元素中的富文本编辑器。这样我就可以将它生成的 HTML 保存在 DB 中,然后在不同的浏览器上将其呈现为 内部HTML .因为它不使用内联 CSS,并且有一个 class 属性来设置 HTML 样式,该属性指的是该编辑器的内置类。我想在这些内置类不可用的平台上呈现此 HTML。

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

或者

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

或者

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

任何帮助,将不胜感激

最佳答案

绝对有可能。我设法做到了,但不是以 Angular 的方式,所以最后我只使用 quill 而不是 ngx-quill。我一直试图弄清楚如何调整 ngx-quill 以反射(reflect)这一点,但尚未成功。

无论如何,如果你想知道我目前是如何做的。

首先我创建 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

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

关于css - 内联样式而不是 quill 编辑器内置类,因为类在渲染 HTML 时不可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59676897/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com