Question

我正在寻找要嵌入Angular7项目的HTML编辑器。编辑者的用户将创建非常简单的网页或对更复杂的页面进行少量编辑。我本来以为WYSISYG编辑器可以解决这个问题，但是我发现它们并不适合对源HTML进行编辑。有人有建议吗？

以下是我到目前为止考虑的清单：

CKEditor5-真正的富文本编辑器。不提供查看/编辑源HTML的功能。
CKEditor4-具有提供编辑源HTML的功能，但似乎不适合编辑网页。
Froala-看起来不错，但不是开源的。
Summernote（和一个typescript端口）-这个看起来很完美。但是，尚未找到用于在Angular中进行设置的文档，并且打字稿库没有任何文档。如果有人有设置经验，那就给个解释吧！
AngularEditor-目前，我已经完成了这一设置并在我的项目中进行工作。编辑网页似乎不错。我最大的问题是，渲染时我插入编辑器中的某些HTML不会保留在编辑器中。样式离开编辑器窗口，并且主页上的其他元素被更改。

有没有我可能忽略的建议？

Answer 1

别再说了-我真的可以推荐CodeMirror：）

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

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

.. also supports HTML markup

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

免责声明：我不是该项目的贡献者，但是我本人已在某些项目中使用了它，因此会认为自己是一个狂热的家伙。

Answer 2

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

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

Answer 3

这是用简单易用的角度实现文本编辑器的最佳方法，如果有人需要遵循以下代码行，这对我来说就是工作

 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 4

我正在使用@ 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;
}

Angular7的HTML编辑器

4 个答案: