カスタマイズ入力し、シフト+角度のリッチテキストエディタでより良い生産性の入力キーを入力します

Web開発者として、同じ要素のために頻繁にコードを書かなければならないなら、あなたはいらいらするかもしれません.そのシナリオでは、キーボードキーの動作をカスタマイズすることができます.これは、開発プロセスをスピードアップし、生産性を高めるのに役立ちます.
統合Angular Rich Text Editor 機能豊富なWYSIWYG HTMLエディタです.これは、ユーザーが簡単にコンテンツをカスタマイズすることができます.これは、さまざまなツールを編集し、リッチコンテンツをフォーマットし、有効なHTMLマークアップまたはマークダウン(MD)のコンテンツを返します.また、画像、リンク、テーブルを挿入することができますし、モジュラーアーキテクチャのリストです.
このブログでは、角度リッチテキストエディターでEnterキーおよびShiftキーを押しながらEnterキーを押しながら、要素(タグ)の作成の既定の動作をカスタマイズすることに焦点を当てます.

角度豊かなテキストエディタを設定する
まず、Getting started with Angular Rich Text Editor ドキュメント.これは角度環境を設定し、アプリケーションに角度リッチテキストエディターコンポーネントを追加するのに役立ちます.

Enterキー設定のカスタマイズ
既定では、任意のエディタのContenteditable要素内でEnterキーが押されたときに、要素が作成され、前の兄弟要素から継承されます.
この既定の動作は、EnterKeyプロパティを使用して角度リッチテキストエディターでカスタマイズできます.カスタマイズできるタグは< p >, < div >, < br >です.デフォルトでは
Enterキーが押されたときに要素が作成されます.
次のコード例を参照してください.ここでは、簡単にEnterKeyプロパティのカスタムオプションを切り替えるドロップダウンリストコンポーネントを作成しました.

アプリ.コンポーネント.HTML

<div class="control-section">
  <table class="api">
   <tbody>
   <tr>
    <td>
     <div>
      <ejs-dropdownlist id='enterOption' #enterOption
        [dataSource]='enterOptionData' (change)='enterChange()'
        [value]='enterValue' [fields]='fields' [popupHeight]='height'
        [placeholder]='enterPlaceHolder' [floatLabelType]='floatLabel'></ejs-dropdownlist>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
 <br>
 <ejs-richtexteditor id='defaultRTE' #defaultRTE [height]='rteHeight'>
    <ng-template #valueTemplate>
     <p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>
    </ng-template>
 </ejs-richtexteditor>
</div>

アプリ.コンポーネント.TS

import { Component, ViewChild} from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
import {DropDownListComponent, FieldSettingsModel} from '@syncfusion/ej2-angular-dropdowns';
import { FloatLabelType } from '@syncfusion/ej2-inputs';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls:['app.component.css'],
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {

@ViewChild('defaultRTE')
public rteObj: RichTextEditorComponent;

@ViewChild('enterOption')
public enterObj: DropDownListComponent;

public enterOptionData: { [key: string]: Object }[] = [
  { Text: 'Create a new <p>', Value: 'P' },
  { Text: 'Create a new <div>', Value: 'DIV' },
  { Text: 'Create a new <br>', Value: 'BR' }
];

public enterPlaceHolder: string = 'When pressing the enter key';
public floatLabel: FloatLabelType = 'Always';
public fields: FieldSettingsModel = { text: 'Text', value: 'Value' };
public rteHeight = 220;
public height: string = '200px';
public enterValue: string = 'P';

public enterChange(): void {
 if (this.enterObj.value === 'P') {
  this.rteObj.enterKey = 'P';
  this.rteObj.value = `<p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
 } else if (this.enterObj.value === 'DIV') {
  this.rteObj.enterKey = 'DIV';
  this.rteObj.value = `<div>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:</div><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
 } else if (this.enterObj.value === 'BR') {
  this.rteObj.enterKey = 'BR';
  this.rteObj.value = `In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
  }
 }
}

スクリーンショット

角度リッチテキストエディタでのEnterキー設定のカスタマイズ

キーの設定を変更
既定では、任意のエディタのContenteditable要素内でShiftキーを押したEnterキーが押されたときに要素が作成されます.ShiffterTerkeyプロパティを使用して、この既定の動作を角度リッチテキストエディターでカスタマイズできます.カスタマイズ可能なタグは< br >、< p >、< div >です.
次のコード例を参照してください.ここでは、ドロップダウンリストコンポーネントを作成し、ShiftEnterKeyプロパティのカスタムオプションを簡単に切り替えます.

アプリ.コンポーネント.HTML

<div class="control-section">
 <table class="api">
  <tbody>
   <tr>
    <td>
     <div>
      <ejs-dropdownlist id='enterOption' #enterOption
         [dataSource]='enterOptionData' (change)='enterChange()'
         [value]='enterValue' [fields]='fields' [popupHeight]='height'
         [placeholder]='enterPlaceHolder' [floatLabelType]='floatLabel'></ejs-dropdownlist>
     </div>
    </td>
    <td>
      <div>
        <ejs-dropdownlist id='shiftEnterOption' #shiftEnterOption
           [dataSource]='shiftEnterData' (change)='shiftEnterChange()'
           [value]='shiftEnterValue' [fields]='fields' [popupHeight]='height'
           [placeholder]='shiftEnterPlaceHolder' [floatLabelType]='floatLabel'></ejs-dropdownlist>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
 <br>
 <ejs-richtexteditor id='defaultRTE' #defaultRTE [height]='rteHeight'>
   <ng-template #valueTemplate>
      <p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>
   </ng-template>
 </ejs-richtexteditor>
</div>

アプリ.コンポーネント.TS

import { Component, ViewChild} from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
import {DropDownListComponent, FieldSettingsModel} from '@syncfusion/ej2-angular-dropdowns';
import { FloatLabelType } from '@syncfusion/ej2-inputs';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls:['app.component.css'],
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {

@ViewChild('defaultRTE')
public rteObj: RichTextEditorComponent;

@ViewChild('enterOption')
public enterObj: DropDownListComponent;

@ViewChild('shiftEnterOption')
public shiftEnterObj: DropDownListComponent;

public enterOptionData: { [key: string]: Object }[] = [
  { Text: 'Create a new <p>', Value: 'P' },
  { Text: 'Create a new <div>', Value: 'DIV' },
  { Text: 'Create a new <br>', Value: 'BR' }
];
public shiftEnterData: { [key: string]: Object }[] = [
  { Text: 'Create a new <br>', Value: 'BR' },
  { Text: 'Create a new <div>', Value: 'DIV' },
  { Text: 'Create a new <p>', Value: 'P' }
];

public enterPlaceHolder: string = 'When pressing the enter key';
public shiftEnterPlaceHolder: string = 'When pressing the shift + enter key';
public floatLabel: FloatLabelType = 'Always';
public fields: FieldSettingsModel = { text: 'Text', value: 'Value' };
public rteHeight = 220;
public height: string = '200px';
public enterValue: string = 'P';
public shiftEnterValue: string = 'BR';

public enterChange(): void {
  if (this.enterObj.value === 'P') {
    this.rteObj.enterKey = 'P';
    this.rteObj.value = `<p>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:</p><ul><li>P – When ‘P’ is configured, pressing enter or shift + enter will create a ‘p’ tag</li><li>DIV – When ‘DIV’ is configured, pressing enter or shift + enter will create a ‘div’ tag</li><li>BR – When ‘BR’ is configured, pressing enter or shift + enter will create a ‘br’ tag</li></ul>`;
  } else if (this.enterObj.value === ‘DIV’) {
    this.rteObj.enterKey = ‘DIV’;
    this.rteObj.value = `<div>In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:</div><ul><li>P – When ‘P’ is configured, pressing enter or shift + enter will create a ‘p’ tag</li><li>DIV – When ‘DIV’ is configured, pressing enter or shift + enter will create a ‘div’ tag</li><li>BR – When ‘BR’ is configured, pressing enter or shift + enter will create a ‘br’ tag</li></ul>`;
  } else if (this.enterObj.value === ‘BR’) {
    this.rteObj.enterKey = ‘BR’;
    this.rteObj.value = `In the Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. The possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
  }
}

public shiftEnterChange(): void {
  if (this.shiftEnterObj.value === 'BR') {
  this.rteObj.shiftEnterKey = 'BR';
  } else if (this.shiftEnterObj.value === 'DIV') {
    this.rteObj.shiftEnterKey = 'DIV';
  } else if (this.shiftEnterObj.value === 'P') {
    this.rteObj.shiftEnterKey = 'P';
  }
 }
}

スクリーンショット

角度リッチテキストエディタでのシフト+ Enterキー設定のカスタマイズ

Githubリファレンス
詳細については、の例をチェックアウトcustomizing the Enter and Shift+Enter key configurations in the Angular Rich Text Editor .

結論
読書ありがとう!SyncFusionでEnterキーとShiftキーを押しながらEnterキーをカスタマイズする方法についての明確なアイデアがありますAngular Rich Text Editor . これは、私たちの開発の時間と負荷を削減し、生産性を高めるのに役立ちます.
あなたはブログ、フォーラムの投稿、ノートセクション、サポートチケット(インシデント)、コメントのセクション、およびメッセージングアプリケーションを作成するために我々の角度豊かなテキストエディタを使用することができます.それを試して、下記のコメントのセクションであなたのフィードバックを残す!
また、私たちを介してお問い合わせすることができますsupport forum , support portal , or feedback portal . いつものように、我々はあなたを支援して満足している!

関連ブログ

Top 10 Features in Angular 13 Every Developer Should Know

Entering Invalid Dates Just Got Better in Angular Apps

How to Update Data Without Rerendering an Entire Grid in Angular

Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App