アングルでリッチテキストエディタを構築する

あなたが気づくならば、現在jira.trungk18.com リッチテキストHTMLエディタを使用します.このチュートリアルではngx-quill .
それはリッチテキストエディタがどのように見えるかです.

参照all tutorials for Jira clone

ソースコードとデモ

リッチエディタモジュール

Markdownテキストエディタのように、リッチテキストエディターをWebアプリケーション上の多くの場所で再利用します.私は新しいモジュールを作ります.RichTextEditorModule , そのために.現在、それは1つのコンポーネントだけを持ちます.RichTextEditorComponent .

モジュールとコンポーネントにはあまりコードがありません.
リッチテキストエディタ.コンポーネント.TS

@Component({
  selector: 'rich-text-editor',
  templateUrl: './rich-text-editor.component.html',
  styleUrls: ['./rich-text-editor.component.css'],
})
export class RichTextEditorComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

リッチテキストエディタ.モジュールです.TS

@NgModule({
  imports: [CommonModule],
  exports: [RichTextEditorComponent],
  declarations: [RichTextEditorComponent],
})
export class MarkdownEditorModule {}

心配しないで、コンポーネントにコードを追加します.😆

ニュージャージー州

リッチテキストエディターを構築するには、JIRAクローン全体のアプリケーションを作成するのに同じ時間がかかります.だから私は利用しているngx-quill .
NgxのQuillは角度モジュールですQuill Rich Text Editor 必要なすべてのコンポーネントを含む.

インストール

npm install ngx-quill

角＜V 5＞を使用したプロジェクト.0.0を実行してください.

npm install [email protected]

基本的な使い方

1 .モジュールへのquillmoduleのインポート

@NgModule({
  imports: [
    ...,

    QuillModule.forRoot()
  ],
  ...
})
class AppModule { ... }

2 )モジュールをimportする

import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { RichTextEditorComponent } from './rich-text-editor.component'
import { QuillModule } from 'ngx-quill'

@NgModule({
  imports: [CommonModule, QuillModule],
  declarations: [RichTextEditorComponent],
  exports: [RichTextEditorComponent],
})
export class RichTextEditorModule {}

3 .スタイルにスタイルをインポートします。SCSS

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';

リッチテキストエディタコンポーネント

私は今ではRichTextEditorComponent . 私は先に行くと私のコンポーネントのテンプレートには、HTMLを配置します.クラス名を設定するcontent-editor 私が後でそれを作ることができるように.

<quill-editor class="content-editor" [placeholder]="''"> </quill-editor>

結果を見てください.Quillは説得力のあるライブラリですので、レンダリングされたコンポーネントにはtextboxがあり、デフォルトのツールバーのボタンはほとんど利用できません.

私の仕事は今、私が必要とするボタンといくつかのCSSスタイリングだけでコンポーネントをカスタマイズするのはかなり簡単です.

ツールバー設定

以下は、1つのツールバー行に対していくつかの基本コマンドで使用する現在の設定です.

export const QuillConfiguration = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    ['link'],
    ['clean'],
  ],
}

それから私はそれをmodules の入力quill-editor

<quill-editor
  class="content-editor"
  [placeholder]="''"
  [modules]="quillConfiguration"
>
</quill-editor>

それは命令が少ない結果だ.

デフォルトではngx-quill 短いtextareaをレンダリングします、そして、それはあなたがタイプするように高さを満たすために自動的に拡大します.デフォルトを設定したいmin-height . デフォルト設定120px .

<quill-editor
  class="content-editor"
  [placeholder]="''"
  [modules]="quillConfiguration"
  [styles]="{'min-height': '120px'}"
>
</quill-editor>

今は直視だと思います.残りの部分は以下のような形式で接続します:

RichTextEditorComponentをフォームに接続する

NgxのQuillの両方のサポートを提供ReactiveForms and TemplateForm . ReactiveFormを使用するには移行しました.そういうわけで、私はAを取るためにMarkdownコンポーネントと同様のアプローチに従いますFormControl としてInput .

export class RichTextEditorComponent implements OnInit {
  quillConfiguration = QuillConfiguration
  @Input() control: FormControl

  ngOnInit() {
    this.control = this.control ?? new FormControl()
  }
}

<quill-editor
  [formControl]="control"
  [placeholder]="''"
  [modules]="quillConfiguration"
  [styles]="{'min-height': '120px'}"
  class="content-editor"
>
</quill-editor>

フォーム内でペアを組んだ結果を見てください.完全に働く.

宿題

私はあなたにそれを残すいくつかの小さな改善があります.

リッチテキストエディタにフォーカスするときに境界線を設定します

実装ControlValueAccessor のためにRichTextEditorComponent あなたが両方を使用できるように[ngModel] and formControl 形式で

それはすべての角度でリッチテキストエディタです.任意の質問は、下のコメントボックスに残したり、Twitterで私に到達.おかげで停止!