エディタの初期化オプション

以下のようなプラグインでエディタの初期化オプションを上書きすることができます。

<mt:setvarblock name="js_include" append="1">
  <script type="module">
    /**
     * The "create" event is triggered before the rich text editor is created.
     */
    MTRichTextEditor.on("create", (options) => {
      // override options here
    })
  </script>
</mt:setvarblock>

オプション一覧

以下のオプションが指定可能です。（プラグインから通常利用しないオプションは除外しています）

height : number | string

高さを指定します。数値を指定した場合はpxとして解釈されます。CSSのheightプロパティに指定する値として文字列で指定することも可能です。

classNames : string[]

編集領域の要素に指定するクラス名を指定します。

stylesheets : string[]

編集領域に挿入するスタイルシートを指定します。httpから始まる文字列の場合にはURLとして、そうでない場合にtext/cssの内容として解釈されます。

extensions : TiptapExtension[]

TiptapのExtensionを直接エディタに組み込む場合に指定します。
具体的な利用方法は以下のサンプルプラグインを参照してください。

• MTRichTextEditorExtensionEmoji
• MTRichTextEditorExtensionFontSize

extensionOptions : Record<string, unknown>

エディタに組み込まれているTiptapのExtensionのオプションを指定します。詳細はこのページの下部にあるextensionOptionsの利用例を参照してください。

toolbar : string[][][][]

ツールバーに表示するボタンの定義を指定します。詳細はツールバーのカスタマイズを参照してください。

toolbarOptions : Record<string, unknown>

ツールバーのオプションを指定します。詳細はツールバーのカスタマイズを参照してください。

statusbar : string[][]

ステータスバーの定義を指定します。詳細はステータスバーのカスタマイズを参照してください。

statusbarOptions : Record<string, unknown>

ステータスバーのオプションを指定します。詳細はステータスバーのカスタマイズを参照してください。

pasteMenu : string[]

貼り付けメニューに表示する項目を指定します。詳細は貼り付け形式の追加を参照してください。

pasteMenuOptions : PasteMenuOptions

貼り付けメニューのオプションを指定します。詳細は貼り付け形式の追加を参照してください。

quickAction : string[]

クイックアクションに表示する項目を指定します。詳細はクイックアクションのカスタマイズを参照してください。

quickActionOptions : QuickActionOptions

クイックアクションのオプションを指定します。詳細はクイックアクションのカスタマイズを参照してください。

htmlOutputOptions : HtmlOutputOptions

HTML出力のオプションを指定します。HtmlOutputOptionsのインターフェイスの定義は以下の通りです。

format : boolean

HTMLをフォーマットするかどうかを指定します。デフォルトは true です。

indentSize : number

インデントのサイズを指定します。デフォルトは 2 です。

contentUnformatted : string[]

フォーマットしないタグのリストを指定します。デフォルトは ['pre', 'style', 'script'] です。

extensionOptionsの利用例

MTRichTextEditorでは、以下のようにTiptapのExtensionを組み込んでいます。

https://github.com/movabletype/mt-rich-text-editor/blob/develop/packages/editor/src/tiptap/extension.ts

extensionOptionsを利用することで、これらのExtensionのオプションを指定することができます。例えばHardBreakのオプションを指定する場合は以下のように指定します。

MTRichTextEditor.on("create", (options) => {
  options.extensionOptions = {
    ...(options.extensionOptions || {}),
    hardBreak: {
      HTMLAttributes: {
        class: 'my-hard-break',
      },
    },
  };
})

特定のExtensionを無効にする場合は、以下のように false を指定します。

MTRichTextEditor.on("create", (options) => {
  options.extensionOptions = {
    ...(options.extensionOptions || {}),
    hardBreak: false,
  };
})

ソースコード

より具体的には以下のコードを参照してください。

https://github.com/movabletype/mt-rich-text-editor/blob/develop/packages/editor/src/editor.ts#L35-L93