我正在使用ngx-quill编辑器作为我的富文本编辑器在我的Angular 项目。所以我可以保存它生成的HTML在DB中,然后呈现它在不同的浏览器作为innerHTML。因为它没有使用内联CSS,并有一个类属性来样式化HTML,它引用了这个编辑器的内置类。我想呈现这个HTML的平台上,这些内置类是不可用的。如何在这些内置类不可用的页面上呈现HTML?或有没有办法把这些类转换成内联样式?或是否有其他选项来呈现由该编辑器保存并应用了样式的HTML?任何帮助都将不胜感激
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
当然,这一点也不理想,而且我更喜欢将大量代码放在组件中,也许其他人可以帮助将其压缩到组件中
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">....
2条答案
按热度按时间jhiyze9q1#
这绝对是可能的。我设法做到了,但不是在一个Angular 的方式,所以在最后我只使用羽毛笔,而不是ngx-羽毛笔。我一直试图找出如何调整ngx-羽毛笔,以反映这一点,但还没有成功。
无论如何,如果你想知道我现在是怎么做的。
首先创建html元素:
然后我将以下代码添加到组件的顶部:
然后在我的init方法中声明它:
}
然后在我想阅读内容的任何地方:
当然,这一点也不理想,而且我更喜欢将大量代码放在组件中,也许其他人可以帮助将其压缩到组件中
7cwmlq892#
对于ngx-quill,您可以像这样导入属性,然后使用样式属性:
在您的 typescript 中:
在您的html中: