Wysiwyg编辑器为angular4

Question

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

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

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

谢谢

Answer 1

既然我有同样的问题,我在这里分享我的研究结果:

NG2-的CKEditor

在这里演示

NGX编辑器

在这里演示

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

quill.js用于角度

在这里演示

注意:Quill使用JSON在内部存储数据,而不是html.

PRIME NG

主题集合,其中包含基于Quill的WYSIWYG编辑器,这里有演示.一些主题是免费的.

NGX-MD

使用MarkDown而不是HTML的WYSIWYG编辑器,这里演示

编辑

如果你选择的是quill.js,你可能想要使用KillerCodeMonkey的实现,因为它与angular 5兼容.

Answer 2

为Andular 6+(原生)尝试这个简单但功能强大的WYSIWYG编辑器

AngularEditor

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

演示就在这里

欢迎PR或新功能请求.

已知错误:Google Chrome错误(如果contenteditable的内容为空(WYSIWYG),则禁用下划线不起作用)

这个编辑器最初是作为我的公司项目https://kassar.ru/的一部分创建的,但我把它解压缩到单独的库中并作为开源项目发布.我希望这可以帮助别人解决他们的问题.

Answer 3

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

NGX编辑器

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

NGX羽毛笔

我最终使用了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 { ... }