web-dev-qa-db-ja.com

Angular7のHTMLエディター

Angular7プロジェクトに埋め込むHTMLエディターを探しています。エディターのユーザーは、非常に単純なWebページを作成するか、より複雑なページを少し編集します。私はもともとWYSISYGエディターでうまくいくかもしれないと思っていましたが、ソースHTMLの編集には適していないことがわかりました。誰か推奨事項はありますか？

これが私がこれまでに検討したことのリストです：

  1. CKEditor5 -本当にリッチテキストエディター。ソースHTMLを表示/編集する機能は提供していません。
  2. CKEditor4 -ソースHTMLを編集する機能を提供しますが、Webページの編集には向いていないようです。
  3. Froala -見栄えは良いですが、オープンソースではありません。
  4. Summernote （そして TypeScript ポート）-これは完璧だと思われます。 Angularでこれを設定するためのドキュメントを見つけることができず、TypeScriptライブラリにはドキュメントがありません。これを設定した経験がある人なら、説明が素晴らしいでしょう！
  5. AngularEditor -私は現在これを1つセットアップしていて、プロジェクト内で作業しています。 Webページの編集には問題ないようです。私の最大の問題は、エディターに挿入した一部のHTMLがレンダリング時にエディター内にとどまらないことです。スタイルはエディターウィンドウを離れ、メインページの他の要素が変更されます。

私が見落としたかもしれない提案はありますか？

angulartypescriptsummernotehtml-editor
9
Tw1sm

もう探す必要はありません-私は本当にお勧めできます CodeMirror :)

それは非常に強力ですが軽量のJSテキストエディターで、htmlページに埋め込むことができ、以下のような多くの機能があります。

  • 100以上の言語のサポート
  • 構文/マークアップの強調表示
  • キーボードバインディング（vim、emacs、sublime）
  • 検索/置換インターフェース
  • タグマッチング
  • ..

..and it HTMLマークアップもサポート

私のお気に入りの機能は、オートコンプリートのサポートです。たとえば、IDE ctrl-spaceを使用してオートコンプリートできます。 この機能をここで試してください HTMLの例を使用して

免責事項：私はプロジェクトへの寄稿者ではありませんが、私はいくつかのプロジェクトでそれを使用しており、自分はファンボーイだと考えています。

4
lolcatzftw

これは、angular簡単で完璧な作業でテキストエディターを実装する最良の方法です。これらのコード行を実行する必要がある場合は、私にとってはうまくいきます。

 npm install @syncfusion/ej2-angular-richtexteditor --save

2番目のステップは、このようなapp.module.tsに上記のライブラリを含めます

 import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';

  @NgModule({
  declarations: [
  AppComponent
 ],
 imports: [
 RichTextEditorAllModule
 ],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

そしてコンポーネントビューページでこの行を使用します

<ejs-richtexteditor></ejs-richtexteditor>

これは、上記のテキストエディタライブラリの結果です enter image description here

3
abubakkar tahir

PrimeNGと、Quill Editorをベースにしたそのエディターを見てください。

https://www.primefaces.org/primeng/#/editor

2
jalex19

@ kolkov/angular-editor @ 0.18.7を使用しています。

特殊文字の問題を解決するために、CRUD Rest APIのコンテンツを送信する前に置換関数を作成しました。

コードスニペット ：

    unentityLtGt(html){
    html = this.replaceAll(html,'&lt;','<');
    html = this.replaceAll(html,'&gt;','>');
    html = this.replaceAll(html,'"&quot;','"');
    html = this.replaceAll(html,'&quot;"','"');
    html = this.replaceAll(html,'&#34;','"');
    return html;
}
1
Daniel Krug