Angular7 的 HTML 编辑器

Question

我正在寻找嵌入 Angular7 项目的 HTML 编辑器。编辑器的用户将创建非常简单的网页或对更复杂的页面进行小的编辑。我最初认为 WYSISYG 编辑器可能会解决问题，但我发现它们不太适合对源 HTML 进行编辑。有人有建议吗？

这是我迄今为止考虑过的清单：

1. CKEditor5 - 真正的富文本编辑器。不提供查看/编辑源 HTML 的功能。
2. CKEditor4 - 确实提供了编辑源 HTML 的能力，但似乎不适合编辑网页。
3. Froala - 看起来很不错，但不是开源的。
4. Summernote（和一个打字稿端口）——这个看起来很完美。一直无法找到在 Angular 中设置它的文档，并且打字稿库没有任何文档。如果有人有设置这个的经验，解释会很棒！
5. AngularEditor - 我目前有这个设置并在我的项目中工作。编辑网页似乎没问题。我最大的问题是我插入到编辑器中的一些 HTML 在渲染时不会留在编辑器中。样式离开编辑器窗口，主页上的其他元素被改变。

任何我可能忽略的建议？

Answer 1

别再看了——我真的可以推荐CodeMirror :)

它是一个非常强大但轻量级的 JS 文本编辑器，可以嵌入到您的 html 页面中，并具有许多功能，例如..

• 支持 100 多种语言
• 语法/标记突出显示
• 键盘绑定（vim、emacs、sublime）
• 搜索/替换界面
• 标签匹配
• ..

..而且它还支持 HTML 标记

我最喜欢的功能是自动完成支持——就像在你的 IDE 中一样，你可以使用 ctrl-space 来自动完成。您可以在此处使用 HTML 示例尝试此功能

免责声明：我不是该项目的贡献者，但我自己在一些项目中使用过它，并认为自己是一个狂热分子。

Answer 2

这是实现带有角度的文本编辑器的最佳方法，简单而完美，如果有人需要遵循这些代码行，它对我有用

 npm install @syncfusion/ej2-angular-richtexteditor --save

第二步像这样在 app.module.ts 中包含上面的库

 import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';

  @NgModule({
  declarations: [
  AppComponent
 ],
 imports: [
 RichTextEditorAllModule
 ],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

然后在组件视图页面中使用这一行

<ejs-richtexteditor></ejs-richtexteditor>

这是上述文本编辑器库的结果

Answer 3

看看 PrimeNG 及其编辑器，它基于 Quill 编辑器。

https://www.primefaces.org/primeng/#/editor