Wysiwyg编辑器为angular4

Question

有人知道一个与angular 4兼容的好的免费wysiwyg编辑器吗？

Froala似乎很好但不幸的是它不是免费的。

也许使用棱角4并不是一个好主意，因为很难找到很多基本的东西......

谢谢

Answer 1

由于我遇到了同样的问题，我在这里分享了我的研究成果：

的 ng2-ckeditor

demo here

ngx-editor

demo here

编辑2019/01/12 - 此项目未在任何情况下维持

quill.js for angular

demo here

注意：Quill使用JSON在内部存储数据，而不是html。

PRIME NG

主题集合，其中包含基于Quill的WYSIWYG编辑器，演示here。有些主题是免费的。

ngx-md

使用MarkDown而不是HTML的WYSIWYG编辑器，演示here

修改

如果您选择的是quill.js，则可能需要使用KillerCodeMonkey's implementation，因为它与angular 5兼容。

Answer 2

为Andular 6+（原生）

尝试这个简单但功能强大的WYSIWYG编辑器

AngularEditor

注意：这个原生的Angular 6+ WYSIWYG编辑器是使用Angular CLI v6.0.5创建的库。

演示是here

欢迎PR或新功能请求。

已知错误：Google Chrome bug（如果contenteditable的内容为空（WYSIWYG），则禁用下划线不起作用）

此编辑器最初是作为我的公司项目https://kassar.ru/的一部分创建的，但我将其解压缩到单独的库中并作为开源项目发布。我希望这有助于某人解决他们的问题。

Answer 3

感谢@Ronin分享您的研究成果。以下是我对我测试的一对夫妇的反馈。

NGX-EDITOR

首先我尝试ngx-editor并且相对容易安装和使用。只需要ngs-boostrap和fontAwesome作为依赖项。然而，我发现我的要求的唯一缺点是添加链接小部件。此库不记得您输入的链接，因此如果您想要更改它们，则需要删除并重新添加它。另一个限制是无法指定最大长度值。

NGX-QUILL

我最终使用ngx-quill。它有更好的方法来处理链接以及指定max-Length的能力。它也很容易安装：

npm install ngx-quill
npm install quill  // Needed for CSS styles

import { QuillModule } from 'ngx-quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

@NgModule({
  imports: [
    ...,

    QuillModule
  ],
  ...
})
class YourModule { ... }

Answer 4

您可以使用ng2-editor。它有许多管理选项。

  

https://github.com/chymz/ng2-ckeditor

Answer 5

我使用＆＃34; ngx-quill＆＃34;作为我的Angular4项目中的WYSIWYG编辑器。

这是富文本编辑器Quill

的Angular（＆gt; = 2）组件

pom.xml

• demo-page
  tool bar image