Inputman.GcRichTextEditor

GcRichTextEditor クラス

階層

GcRichTextEditor

コンストラクタ

constructor

プロパティ

イベント

コンストラクタ

constructor

new GcRichTextEditor(inputEl: HTMLDivElement | HTMLTextAreaElement, config?: IGcRichTextEditorConfig): GcRichTextEditor

```
var gcRichTextEditor = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {
     width: 500,
     height: 600,
     watermarkText: "Please input some text",
     resizeMode: GC.InputMan.GcRichTextEditorResizeMode.Both
});
```
引数
- inputEl: HTMLDivElement | HTMLTextAreaElement
  
  元のHTML要素。GcRichTextEditorはこの要素を非表示にし、下に新しい要素を生成します要素にidプロパティが含まれる場合、GcRichTextEditorはidプロパティの値をgcim__richtexteditor-original_id属性に同期します
- オプション config: IGcRichTextEditorConfig
  
  Configオブジェクト。GcRichTextEditorの幅／高さ／ウォーターマークなどプロパティをカスタマイズします。参照 IGcRichTextEditorConfig
戻り値 GcRichTextEditor

プロパティ

acceptsTab

acceptsTab: boolean

複数行に設定したリッチテキストエディタコントロールで［Tab］キーを押したときに、次のコントロールへフォーカスを移動するのか、またはリッチテキストエディタコントロールにタブ文字を入力するのかを設定または取得します。

読み取り専用 askBeforeUnload

askBeforeUnload: boolean

アンロードする前の確認を表示するかどうかを取得します。

autoConvert

autoConvert: boolean

指定した文字にあわせて文字種を自動的に変換するかどうかを設定または取得します。

enabled

enabled: boolean

リッチテキストエディタコントロールやオブジェクトを有効にするかどうかを示す値を取得または設定します。

filterCrlf

filterCrlf: boolean

改行コードの取り扱いを設定または取得します。

読み取り専用 height

height: number | string

リッチテキストエディタの高さを取得します。

読み取り専用 inline

inline: boolean

リッチテキストエディタコントロールの表示モードがインラインモードかどうかを取得します。

inputFormat

inputFormat: string

入力書式を設定または取得します。

lengthUnit

lengthUnit: LengthUnitType

文字数を取得するときの単位を設定または取得します。

読み取り専用 maxHeight

maxHeight: number | null

リッチテキストエディタの最大高を取得します。

maxLength

maxLength: number | null

最大文字数を設定または取得します。

読み取り専用 maxWidth

maxWidth: number | null

リッチテキストエディタの最大幅を取得します。

menu: IMenuConfig

メニューバーに設定するメニュー項目を取得します。

読み取り専用 menubar

menubar: Array<GcRichTextEditorMenuBarItem | string>

メニューバーの表示項目を取得します。

読み取り専用 minHeight

minHeight: number | null

リッチテキストエディタの最小高を取得します。

読み取り専用 minWidth

minWidth: number | null

リッチテキストエディタの最小幅を取得します。

読み取り専用 plugins

plugins: Array<GcRichTextEditorPluginItem>

プラグイン項目を取得します。

readOnly

readOnly: boolean

リッチテキストエディタコントロールを読み取り専用モードにするかどうかを取得または設定します。

読み取り専用 resizeMode

resizeMode: GcRichTextEditorResizeMode

リッチテキストエディタコントロールサイズが変更可能かどうかを取得します。

statusbar

statusbar: boolean

ステータスバーを表示または非表示にします。

text

text: string

リッチテキストエディタコントロールの現在のテキストを取得または設定します。

toolbar: Array<GcRichTextEditorToolbarItem | string>

ツールバーの表示項目を取得します。

読み取り専用 toolbarMode

toolbarMode: string

ツールバーモードを取得します。

読み取り専用 watermarkText

watermarkText: string

リッチテキストエディタコントロールが未入力のときの代替テキストを取得します。

読み取り専用 width

width: number | string

リッチテキストエディタの幅を取得します。

読み取り専用 zoomLevel

zoomLevel: any

現在の表示倍率を取得します。

メソッド

addCommand

addCommand(name: string, callback: (this: any, ui: boolean, value: any): void): void

GcRichTextEditorにカスタムコマンドを追加します

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {
     formats: {
      'custombold': {
         selector: 'p',
        classes: 'customClass'
         }
     },
});

// getselectionsというカスタムコマンドを登録します
gcRichTextEditor1.addCommand('getselection', (ui, v) => {
      console.log(this.gcRichTextEditor1.getSelection());
});

// カスタムコマンドを実行します
gcRichTextEditor1.execCommand('getselection');

// カスタムコマンドにビルドインの動作を登録します
gcRichTextEditor1.addCommand(GC.InputMan.GcRichTextEditorCommand.Bold, (ui, v) => {
      gcRichTextEditor1.applyFormat('custombold');
});

// テキストを太字にする動作のカスタムコマンドを実行します
gcRichTextEditor1.execCommand(GC.InputMan.GcRichTextEditorCommand.Bold);

引数

name: string

カスタムコマンド名
callback: (this: any, ui: boolean, value: any): void

コマンドが実行されたときに発生します
- - (this: any, ui: boolean, value: any): void
  - 引数
    - this: any
    - ui: boolean
    - value: any
    戻り値 void

戻り値 void

addContextToolbar

addContextToolbar(name: string, args: ContextToolbarConfig): void

GcRichTextEditorに編集時のツールバーを追加しますひとつのGcRichTextEditorで、選択された要素ごとに複数のツールバー項目を使用することができますこのメソッドは、config の setup 関数で呼び出す必要があります。参照 IGcRichTextEditorConfig

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {
    plugins: [GC.InputMan.GcRichTextEditorPluginItem.All],
    width: 700,
    height: 500,
    toolbar: [
        'customButton',
        GC.InputMan.GcRichTextEditorToolbarItem.Copy,
        GC.InputMan.GcRichTextEditorToolbarItem.Cut
    ],
    setup: (editor) => {
        editor.addContextToolbar('textselection', {
            items: [
                GC.InputMan.GcRichTextEditorToolbarItem.Bold,
                GC.InputMan.GcRichTextEditorToolbarItem.Italic,
                GC.InputMan.GcRichTextEditorToolbarItem.SeparateLine,
                GC.InputMan.GcRichTextEditorToolbarItem.BlockQuote,
                "customButton"
            ],
            predicate: (node) => {
                return editor.getSelection();
            },
            position: 'selection'
        });
    }
});

引数

name: string

編集時のツールバー名, 一意的に設定する必要があります
args: ContextToolbarConfig

編集時のツールバーのconfig, 参照 ContextToolbarConfig

戻り値 void

addEventListener

addEventListener(eventName: GcRichTextEditorEvent, callback: (sender: GcRichTextEditor, eventArgs?: object): void): void

引数
- eventName: GcRichTextEditorEvent
- callback: (sender: GcRichTextEditor, eventArgs?: object): void
  - - (sender: GcRichTextEditor, eventArgs?: object): void
    - 引数
      - sender: GcRichTextEditor
      - オプション eventArgs: object
      戻り値 void
戻り値 void

applyFormat

applyFormat(name: string, args?: object): void

現在選択しているコンテンツにフォーマットを適用します

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {
  formats: {
     'custom-format': {
          inline: 'span',
          styles: {
              color: '%value'
          }
      }
  }
});

gcRichTextEditor1.applyFormat(GC.InputMan.GcRichTextEditorFormatItem.Bold);

gcRichTextEditor1.applyFormat('custom-format', { value: 'red' });

引数

name: string

ビルドインあるいはカスタムフォーマット名, 参照 ToolbarItemConfig
オプション args: object

オプション, コマンドパラメータ

戻り値 void

destroy

destroy(): void

現在のGcRichTextEditorを削除し、textareaの元の状態に戻します
```
gcRichTextEditor1.destroy();
```
戻り値 void

execCommand

execCommand(cmd: GcRichTextEditorCommand, value?: any): boolean

GcRichTextEditorのビルドインコマンドやカスタムコマンドを実行します

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {});

// ビルドインコマンドを実行します
gcRichTextEditor1.execCommand(GC.InputMan.GcRichTextEditorCommand.Bold);

// パラメータを設定してビルドインコマンドを実行します
gcRichTextEditor1.execCommand(GC.InputMan.GcRichTextEditorCommand.InsertTable, {
     rows: 2,
     columns: 3
});

引数

cmd: GcRichTextEditorCommand

コマンド名。参照 GcRichTextEditorCommand
オプション value: any

オプション。コマンドパラメータの情報

戻り値 boolean

getContent

getContent(args?: ContentFormat): string

フォーマットを含む現在のリッチテキストエディタのコンテンツを取得します（デフォルトフォーマットはhtml）
```
gcRichTextEditor1.getContent();
```
引数
- オプション args: ContentFormat
  
  オプション, フォーマットタイプ。参照 ContentFormat
戻り値 string

getContentLength

getContentLength(): number

コンテンツの長さを取得します。

戻り値 number

getLanguage

getLanguage(): GcRichTextEditorLanguage

戻り値 GcRichTextEditorLanguage

getSelection

getSelection(args?: ContentFormat): string

現在選択されているコンテンツを指定したフォーマットで取得しますデフォルトのコンテンツフォーマットはhtmlです
```
gcRichTextEditor1.getSelection(GC.InputMan.ContentFormat.Text);
```
引数
- オプション args: ContentFormat
  
  オプション, フォーマットタイプ。参照 ContentFormat
戻り値 string

getSelectionLength

getSelectionLength(): number

選択内容の長さを取得します。

戻り値 number

hide

hide(): void

戻り値 void

insertContent

insertContent(content: string, args?: ContentFormat): void

現在のカーソル位置に異なるフォーマットのコンテンツを挿入しますデフォルトのコンテンツフォーマットはhtmlです
```
gcRichTextEditor1.insertContent("insert content");
```
引数
- content: string
  
  コンテンツ
- オプション args: ContentFormat
  
  オプション, フォーマットタイプ。参照 ContentFormat
戻り値 void

queryCommandState

queryCommandState(cmd: string): boolean

GcRichTextEditorのコマンド実行状態（太字、斜体、下線など）を取得します

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {});

// 現在の選択範囲が斜体であるかどうかを取得します
var isItalic = gcRichTextEditor1.queryCommandState(GC.InputMan.GcRichTextEditorCommand.Italic);

引数

cmd: string

コマンド名, 参照 GcRichTextEditorCommand

戻り値 boolean

queryCommandValue

queryCommandValue(cmd: string): string

GcRichTextEditorのコマンド実行情報（フォントなど）を取得します

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {});

// 現在の選択範囲のフォント名を取得します
var isItalic = gcRichTextEditor1.queryCommandState(GC.InputMan.GcRichTextEditorCommand.FontName;

引数

cmd: string

コマンド名, 参照 GcRichTextEditorCommand

戻り値 string

registerMenuItem

registerMenuItem(name: string, args: MenuItemConfig): void

GcRichTextEditorにメニュー項目を登録し、MenubarやContextMenuに使用することができますこのメソッドは、config の setup 関数で呼び出す必要があります。参照 IGcRichTextEditorConfig

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {
     plugins: [GC.InputMan.GcRichTextEditorPluginItem.All],
     width: 700,
     height: 500,
     menubar: ['custom'],
     menu: {
         custom: {
             title: 'Custom Menu List',
             items: ['initmenu']
         }
     },
     contextmenu: [
         'initmenu'
     ],
     setup: (editor) => {
         editor.registerMenuItem('initmenu', {
             text: 'Init MenuItem Description',
             enabled: false,
             onSetup: (enableConfig) => {
                 if (!editor.getContent() && !enableConfig.isEnabled()) {
                     enableConfig.setEnabled(true);
                 } else {
                     enableConfig.setEnabled(false);
                 }
             },
             onAction: () => editor.insertContent(
                 "<p>This is init text for GcRichTextEditor</p>")
         });
     }
});

引数

name: string

カスタムメニュー項目名, 一意的に設定する必要があります
args: MenuItemConfig

カスタムメニュー項目のconfig, 参照 MenuItemConfig

戻り値 void

registerShortcut

registerShortcut(pattern: string, desc: string, cmdFunc: (): void): void

リッチテキストエディタにカスタムアクション（操作）を実行するためのショートカットを登録します
```
gcRichTextEditor1.registerShortcut('ctrl+alt+U', 'Insert username', () => {
   gcRichTextEditor1.insertContent(`@username`);
});
```javascript
```
引数
- pattern: string
  
  ショートカットキー。「＋」を使用して複数のキーを結合します
- desc: string
  
  説明
- cmdFunc: (): void
  
  ショートカットキーが押下されたときに実行します
  - - (): void
    - 戻り値 void
戻り値 void

registerToolbarItem

registerToolbarItem(name: string, args: ToolbarItemConfig): void

GcRichTextEditorにツールバー項目を登録し、ツールバーや編集時のツールバーに使用することができますこのメソッドは、config の setup 関数で呼び出す必要があります。参照 IGcRichTextEditorConfig

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {
     plugins: [GC.InputMan.GcRichTextEditorPluginItem.All],
     width: 700,
     height: 500,
     toolbar: [
         'customButton',
         GC.InputMan.GcRichTextEditorToolbarItem.Copy,
         GC.InputMan.GcRichTextEditorToolbarItem.Cut
     ],
     setup: (editor) => {
         editor.registerToolbarItem('customButton', {
             text: 'Custom Button',
             enabled: false,
             onSetup: (enableConfig) => {
                 editor.addEventListener('copy', () => {
                     if (!enableConfig.isEnabled()) {
                         enableConfig.setEnabled(true);
                     }
                 });
             },
             onAction: () => {
                 editor.insertContent(`<strong>Important text!</strong>`);
             }
         });
     }
});

引数

name: string

カスタムツールバー項目名, 一意的に設定する必要があります
args: ToolbarItemConfig

カスタムツールバー項目のconfig, 参照 ToolbarItemConfig

戻り値 void

removeEventListener

removeEventListener(eventName: GcRichTextEditorEvent, callback: (sender: GcRichTextEditor, eventArgs?: object): void): void

引数
- eventName: GcRichTextEditorEvent
- callback: (sender: GcRichTextEditor, eventArgs?: object): void
  - - (sender: GcRichTextEditor, eventArgs?: object): void
    - 引数
      - sender: GcRichTextEditor
      - オプション eventArgs: object
      戻り値 void
戻り値 void

removeFormat

removeFormat(name: string, args?: object): void

現在選択しているコンテンツのフォーマットを削除します
```
gcRichTextEditor1.removeFormat(GC.InputMan.GcRichTextEditorFormatItem.Bold);

gcRichTextEditor1.removeFormat('custom-format', { value: 'red' });
```
引数
- name: string
  
  ビルドインあるいはカスタムフォーマット名, 参照 ToolbarItemConfig
- オプション args: object
  
  オプション, コマンドパラメータ
戻り値 void

replaceSelection

replaceSelection(content: string, args?: ContentFormat): void

現在選択されているコンテンツを特定のフォーマットで置き換えますデフォルトのコンテンツフォーマットはhtmlです
```
gcRichTextEditor1.replaceSelection("new content", GC.InputMan.ContentFormat.Text);
```
引数
- content: string
  
  コンテンツ
- オプション args: ContentFormat
  
  オプション, フォーマットタイプ。参照 ContentFormat
戻り値 void

setContent

setContent(content: string, args?: ContentFormat): string

現在のリッチテキストエディタのコンテンツを違うフォーマットに設定しますデフォルトのコンテンツフォーマットはhtmlです
```
gcRichTextEditor1.setContent("new content", GC.InputMan.ContentFormat.Text);
```
引数
- content: string
  
  リッチテキストエディタの全てのコンテンツを置き換える内容
- オプション args: ContentFormat
  
  オプション, フォーマットタイプ。参照 ContentFormat
戻り値 string

setLanguage

setLanguage(v: GcRichTextEditorLanguage): void

引数
- v: GcRichTextEditorLanguage
戻り値 void

show

show(): void

戻り値 void

イベント

AfterExecCommand

AfterExecCommand(sender: GcRichTextEditor, args: object): void

GcRichTextEditorのコマンドが実行した後に発生します

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {});

// 指定コマンドを実行した後にコンソールにログを出力します
gcRichTextEditor1.addEventListener(GC.InputMan.GcRichTextEditorEvent.AfterExecCommand, (sender, evt) => {
    if (evt.cmd === GC.InputMan.GcRichTextEditorCommand.Bold) {
         console.log("GcRichTextEditor Bold command is executed!");
     }
});

引数

sender: GcRichTextEditor

イベントが発生したGcRichTextEditorコントロール
args: object

イベントデータ

戻り値 void

BeforeExecCommand

BeforeExecCommand(sender: GcRichTextEditor, args: object): void

GcRichTextEditorのコマンドが実行する前に発生します

var gcRichTextEditor1 = new GC.InputMan.GcRichTextEditor(document.getElementById("textarea1"), {});

// 指定された条件でコマンドを実行しないように制御します
gcRichTextEditor1.addEventListener(GC.InputMan.GcRichTextEditorEvent.BeforeExecCommand, (sender, evt) => {
    if (evt.cmd === GC.InputMan.GcRichTextEditorCommand.Bold) {
         if (sender.getSelection() === 'content') {
             evt.preventDefault();
         } else {
             return;
         }
     }
});

引数

sender: GcRichTextEditor

イベントが発生したGcRichTextEditorコントロール
args: object

イベントデータ

戻り値 void

Blur

Blur(sender: GcRichTextEditor, args: object): void

フォーカスを失ったとき発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

Copy

Copy(sender: GcRichTextEditor, args: object): void

コピーしたときに発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

Cut

Cut(sender: GcRichTextEditor, args: object): void

切り取りしたときに発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

Focus

Focus(sender: GcRichTextEditor, args: object): void

フォーカスするときに発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

Init

Init(sender: GcRichTextEditor, args: object): void

GcRichTextEditorがコンテンツを読み込んだ後に、コンテンツを変更することやフォーマットを適用することができます

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

KeyDown

KeyDown(sender: GcRichTextEditor, args: object): void

キーを押下した時にイベントが発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

KeyPress

KeyPress(sender: GcRichTextEditor, args: object): void

キーを押下した時にイベントが発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

KeyUp

KeyUp(sender: GcRichTextEditor, args: object): void

キーから離れたときに発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

Paste

Paste(sender: GcRichTextEditor, args: object): void

貼り付けたときに発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

SelectionChange

SelectionChange(sender: GcRichTextEditor, args: object): void

選択領域が変更されたときに発生します

引数
- sender: GcRichTextEditor
  
  イベントが発生したGcRichTextEditorコントロール
- args: object
  
  イベントデータ
戻り値 void

Inputman.GcRichTextEditor

GcRichTextEditor クラス

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

引数

inputEl: HTMLDivElement | HTMLTextAreaElement

オプション config: IGcRichTextEditorConfig

戻り値 GcRichTextEditor

プロパティ

acceptsTab

読み取り専用 askBeforeUnload

autoConvert

enabled

filterCrlf

読み取り専用 height

読み取り専用 inline

inputFormat

lengthUnit

読み取り専用 maxHeight

maxLength

読み取り専用 maxWidth

読み取り専用 menu

読み取り専用 menubar

読み取り専用 minHeight

読み取り専用 minWidth

読み取り専用 plugins

readOnly

読み取り専用 resizeMode

statusbar

text

読み取り専用 toolbar

読み取り専用 toolbarMode

読み取り専用 watermarkText

読み取り専用 width

読み取り専用 zoomLevel

メソッド

addCommand

引数

name: string

callback: (this: any, ui: boolean, value: any): void

引数

this: any

ui: boolean

value: any

戻り値 void

戻り値 void

addContextToolbar

引数

name: string

args: ContextToolbarConfig

戻り値 void

addEventListener

引数

eventName: GcRichTextEditorEvent

callback: (sender: GcRichTextEditor, eventArgs?: object): void

引数

sender: GcRichTextEditor

オプション eventArgs: object

戻り値 void

戻り値 void

applyFormat

引数

name: string

オプション args: object

戻り値 void

destroy

戻り値 void

execCommand

引数

cmd: GcRichTextEditorCommand

オプション value: any

戻り値 boolean

getContent

引数

オプション args: ContentFormat