web-dev-qa-db-ja.com

Angle 4のWysiwygエディタ

誰かがangular 4と互換性のある無料のwysiwygエディターを知っていますか?

Froalaは良いようですが、残念ながら無料ではありません。

angular 4を使用することは、多くの基本的なものを見つけるのが難しいため、良いアイデアではありませんでした...

ありがとうございました

34
error

私は同じ問題を抱えていたので、ここで私の研究の結果を共有しています:

ng2-ckeditor

デモ ここ

enter image description here

ngx-editor

デモ ここ

2019/01/12を編集-このプロジェクトISはもうアクティブに維持されていません

enter image description here

角度用のquill.js

デモ ここ

注:Quillは、htmlではなくJSONを使用してデータを内部的に保存します。

enter image description here

プライムNG

クイルベースのWYSIWYGエディターを備えたテーマコレクション、デモ こちら 。一部のテーマは無料です。

ngx-md

HTMLではなくMarkDownを使用するWYSIWYGエディター、デモ ここ

編集

Quill.jsを選択した場合、angular 5と互換性があるため、 KillerCodeMonkeyの実装 を使用できます。

43
Ronin

Andular 6+(ネイティブ)向けのこのシンプルだが強力なWYSIWYGエディターをお試しください

AngularEditor

注:このネイティブAngular 6+ WYSIWYGエディターは、Angular CLI v6.0.5を使用してライブラリーとして作成されました。

![AngularEditor

デモは こちら

PRまたは新機能のリクエストは大歓迎です。

このエディターは元々、企業プロジェクト https://kassar.ru/ の一部として作成されましたが、別のライブラリに抽出し、オープンソースプロジェクトとして投稿しました。これが問題の解決に役立つことを願っています。

21
Andrey K.

研究を共有してくれた@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 { ... }
6
velval

Ng2-editorを使用できます。管理する多くのオプションがあります。

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

4
Aman Jain

私はAngular4プロジェクトでWYSIWYGエディターとして「 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
2
Fibi