Angular7 的 HTML 编辑器

Question

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

这是我目前考虑过的列表：

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

有什么我可能忽略的建议吗？

Answer 1

我正在使用@kolkov/angular-editor@0.18.7。

为了解决特殊字符的问题，我创建了一个替换 在为 CRUD Rest API 发送内容之前的函数。

代码sn-p：

    unentityLtGt(html){
    html = this.replaceAll(html,'&lt;','<');
    html = this.replaceAll(html,'&gt;','>');
    html = this.replaceAll(html,'"&quot;','"');
    html = this.replaceAll(html,'&quot;"','"');
    html = this.replaceAll(html,'&#34;','"');
    return html;
}

Answer 2

看看 PrimeNG 及其基于 Quill Editor 的编辑器。

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

Answer 3

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

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

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

..它also supports HTML markup

我最喜欢的功能是自动完成支持——就像在你的 IDE 中你可以使用 ctrl-space 来自动完成一样。 您可以通过 HTML 示例try this feature here

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

Answer 4

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

 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>

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