HTML Angular7 的编辑器

Question

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

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

CKEditor5 - 真正的富文本编辑器。不提供 view/edit 来源 HTML.
CKEditor4 - 确实提供了编辑源代码的功能 HTML 但似乎不适合编辑网页。
Froala - 看起来不错，但不是开源的。
Summernote (and a typescript port) - 这个看起来很完美。虽然无法在 Angular 中找到用于设置它的文档，但 typescript 库没有任何文档。如果有人有设置这个的经验，解释会很好！
AngularEditor - 我目前有这个设置并在我的项目中工作。编辑网页似乎没问题。我最大的问题是，我插入到编辑器中的一些 HTML 在渲染时不会留在编辑器中。样式离开编辑器 window 并且主页上的其他元素被更改。

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

Answer 1

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

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

代码片段：

    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 多种语言
syntax/markup 突出显示
键盘绑定（vim、emacs、sublime）
search/replace界面
标签匹配
..

..它 also supports HTML markup

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

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

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>

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

HTML Angular7 的编辑器

HTML Editor for Angular7

html-editor

typescript

summernote

angular