angular4 的所见即所得编辑器

Question

有人知道与 angular 4 兼容的好用的免费所见即所得编辑器吗？

Froala 看起来不错，可惜它不是免费的。

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

谢谢

Answer 1

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

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

Answer 2

因为我遇到了同样的问题，所以我在这里分享我的研究结果：

ng2-ckeditor

演示here

ngx-editor

演示here

quill.js for angular

演示 here

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

总理 NG

主题集，其中还包含 Quill-based WYSIWYG-editor，演示 here。一些主题是免费的。

ngx-md

使用 MarkDown 而不是 HTML 的所见即所得编辑器，演示 here

编辑

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

兼容

Answer 3

我在 Angular4 项目中使用“ngx-quill”作为所见即所得编辑器。

这是富文本编辑器 Quill 的 Angular (>=2) 组件

angular v4 - ngx-quill <=1.6.0
angular v5 - ngx-quill > 1.6.0
angular v6 - ngx-quill >= 3.0.0

demo-page
tool bar image

Answer 4

感谢@Ronin 分享您的研究。这是我对我测试过的一对夫妇的反馈。

NGX-EDITOR

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

NGX-QUILL

我最终使用了 ngx-quill。它有更好的方法来处理 links 以及指定最大长度的能力。它也很容易安装：

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 5

试试这个简单但功能强大的 WYSIWYG 编辑器，适用于 Andular 6-12（原生）

AngularEditor

注意：本机 Angular 6+ 所见即所得编辑器是作为库创建的。

演示是 here

欢迎 PR 或新功能请求。

此编辑器最初是作为我公司项目 https://online.freicon.ru/ 的一部分创建的，但我将其提取到单独的库中并 post 作为开源项目。我希望这可以帮助人们解决他们的问题。