【问题标题】:Wysiwyg editor for angular4 [closed]angular4的所见即所得编辑器[关闭]
【发布时间】:2017-09-12 12:41:44
【问题描述】:

有人知道与 Angular 4 兼容的免费所见即所得编辑器吗?

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

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

谢谢

【问题讨论】:

标签: angular wysiwyg


【解决方案1】:

由于我遇到了同样的问题,我在这里分享我的研究结果:

ng2-ckeditor

演示here

ngx-editor

演示here

quill.js for angular

演示here

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

PRIME NG

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

ngx-md

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

编辑

如果您选择的是 quill.js,您可能希望使用 KillerCodeMonkey's implementation,因为它与 angular 5 兼容。

【讨论】:

  • 这个答案可能对一个人有用,但你能建议如何提供代码编辑器本身吗?我的意思是我想要一个编辑器,我可以在其中编写代码,并且我可以并排在
     标记中看到代码 sn-p。
  • ngx-editor 没有得到积极维护
  • @AnilVangari thx 我会更新它
  • 为了节省一些时间,quill 目前不能与 Angular Universal 一起使用,尽管它是我最喜欢的...
  • 有什么方法可以浏览ng2-ckeditor中的图片吗?
【解决方案2】:

试试这个用于 Andular 6-12(原生)的简单但功能强大的 WYSIWYG 编辑器

AngularEditor

注意:这个原生 Angular 6+ WYSIWYG 编辑器是作为库创建的。

演示是here

欢迎 PR 或新功能请求。

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

【讨论】:

  • 由于某种原因,控件的对齐在新的实现中被破坏了。我认为这是因为我的文档的基本 rem 大小,但事实并非如此。有什么想法吗?
  • @snkv 也许基本字体不同,您需要了解......带有工作示例的页面。 link。总的来说,我当然还需要编辑样式和标记。
  • 我做了一些自定义调整,现在似乎工作正常。如果我遇到障碍,我会重新检查这个线程。再次感谢!
  • 上传图片好像不起作用?
  • 很棒的库谢谢。我有一个小问题,我得到的最终编辑器值没有 css(例如,即使用户点击了 align-center,也没有 text-align: center)
【解决方案3】:

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

NGX-EDITOR

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

NGX-QUILL

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

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 { ... }

【讨论】:

  • 当前版本的 ngx-quill 不支持解析 HTML 元素。它虽然正在开发中。到目前为止,它在包括 IE11 在内的所有浏览器中都能正常工作。
【解决方案4】:

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

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

【讨论】:

    【解决方案5】:

    我在 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
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多