Angular7的HTML

Question

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

下面是我考虑过的事情的清单：

1. CKEditor5 --一个非常丰富的文本编辑器。不提供查看/编辑源HTML的能力。
2. CKEditor4 -确实提供了编辑源HTML的能力，但似乎不适合编辑网页。
3. 弗洛拉 -看起来很不错，但不是开源的。
4. 萨默尔 (和一个打字脚本端口)--这个看起来很完美。但是，还没有找到用角度来设置这些的文档，而且类型记录库也没有任何文档。如果有人有这样的经验，一个解释将是很棒的！
5. AngularEditor -我现在有这个设置，并在我的项目内工作。它似乎可以编辑网页。我最大的问题是我在编辑器中插入的一些HTML在呈现时不会停留在编辑器中。样式离开编辑器窗口，主页面上的其他元素将被更改。

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

Answer 1

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

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

• 支持100多种语文
• 语法/标记突出显示
• 键盘绑定(vim，emacs，崇高)
• 搜索/替换接口
• 标签匹配
• 。。

..and it 还支持HTML标记

我最喜欢的特性是自动完成支持--就像在IDE中一样，您可以使用ctrl空间来自动完成。您可以使用在这里尝试一下这个特性示例来实现

免责声明:我不是这个项目的贡献者，但是我自己在一些项目中使用过它，并且会认为自己是一个狂热的人。

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